reactjs – Webpack performance

Question:

I recently started using Webpack along with ReactJS, and ran into such a problem that the build time takes from 150 to 200 seconds, I suspect. that's not normal)) /node_modules/ contains about 30 plugins, babel has enabled syntax checking only for "my" files. Tell me how you can speed up the build, or is the execution time of 200 seconds the norm?

The project already has about 50 modules (components, actions, reducers).

PPS Here is my version of the config, I will be grateful if you correct it!

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require("path");

module.exports = {
  entry: "./scripts/index",
  output: {
    path: path.join(__dirname, 'build'),
    filename: "bundle.js"
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test:/\.js$/,
        include: __dirname + '/scripts',
        loader:
          'babel'
      },
      {
        test:/\.css$/,
        include: __dirname + '/styles',
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      },
      {
        test:/\.styl$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader')
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        loaders: [
            'file-loader?name=img/[name].[ext]',
        ]
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        include: __dirname + '/fonts',
        loader: 'file-loader?name=fonts/[name].[ext]'
      },
      {
        test: /\.json$/,
        loader: 'json'
      }
    ]
  },
  devServer: {
    host: 'localhost',
    port: 3000
  },
  plugins: [
    new ExtractTextPlugin('bundle.css')
  ]
};

I enclose Package.json

{
  "name": "gps-frontend",
  "version": "1.0.0",
  "author": "lardi-trans",
  "license": "ISC",
  "dependencies": {
    "leaflet": "^0.7.7",
    "leaflet.icon.glyph": "^0.2.0",
    "net": "^1.0.2",
    "react": "^15.1.0",
    "react-addons-update": "^15.1.0",
    "react-color-picker": "^3.1.0",
    "react-dom": "^15.0.0",
    "react-localization": "0.0.2",
    "react-redux": "^4.4.5",
    "redux": "^3.5.1",
    "redux-logger": "^2.6.1",
    "sockjs-client": "^1.1.0",
    "stompjs": "^2.3.3",
    "traverson": "^3.1.3",
    "traverson-hal": "^4.1.1"
  },
  "devDependencies": {
    "babel-core": "^6.7.2",
    "babel-loader": "^6.2.4",
    "babel-plugin-object-assign": "^1.2.1",
    "babel-plugin-transform-es2015-destructuring": "^6.9.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "image-webpack-loader": "^1.6.3",
    "json-loader": "^0.5.4",
    "react-hot-loader": "^1.3.0",
    "redux-thunk": "^2.0.1",
    "style-loader": "^0.13.1",
    "stylus": "^0.54.2",
    "stylus-loader": "^2.0.0",
    "webpack": "^1.12.14"
  }
}

Answer:

Use HOT MODULE REPLACEMENT . then the files will not be rebuilt, but only the part where the changes have occurred

Scroll to Top