Re-build time issue with webpack v3.0.0

[psr-ai]

I migrated to v3.0.0 from version 1.x and followed the official migration guide to do so. But the re-build time of webpack-dev-server and webpack watch had increased significantly (from 3 seconds to 15 seconds). I downgraded to v2.6.1, and the re-build time got back to what it was on version 1, using the same config file. Here is the config file that I am using:

const path = require('path');
require('es6-promise').polyfill();
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const devBuild = process.env.NODE_ENV !== 'production';
const nodeEnv = devBuild ? 'development' : 'production';

const config = {
  entry: [
    'es5-shim/es5-shim',
    'es5-shim/es5-sham',
    'babel-polyfill',
    './app/common/startup/CommonApp'
  ],
  output: {
    filename: 'webpack-bundle.js',
    path: path.resolve(__dirname, '../app/assets/webpack'),
  },

  resolve: {
    extensions: ['.json', '.jsx', '.js'],
    alias: {
      libs: path.join(process.cwd(), 'app', 'libs'),
      common: path.join(process.cwd(), 'app', 'common'),
      react: path.resolve('./node_modules/react'),
      'react-dom': path.resolve('./node_modules/react-dom'),
    },
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(nodeEnv),
      },
    }),
    new ExtractTextPlugin({ filename: 'app.css', allChunks: true }),
    new webpack.LoaderOptionsPlugin({
      debug: true
    })
  ],
  module: {
    rules: [
      {
        test: /plugin\.css$/,
        use: [
          'style-loader', 'css-loader',
        ],
      },
      { test: require.resolve('react'), use: 'imports-loader?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham' },
      {
        test: /\.css$/, exclude: /plugin\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
        })
      },
      { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ }
    ],
  },
};

module.exports = config;

if (devBuild) {
  console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
  module.exports.devtool = 'eval-source-map';
} else {
  config.plugins.push(
    new webpack.optimize.DedupePlugin()
  );
}

The only difference I see in the logs is:

DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead. at /node_modules/extract-text-webpack-plugin/index.js:271:24

which pops up when using v3.0.0 but doesn't show any such warning with v2.6.1.

Which means it must be related to extract-text-webpack-plugin?

[joshwiens]

@raiprabh - This issue will be fully resolved with #553 which is waiting on a fix in Webpack ( it's listed in the PR ).

I can't tell from what is listed but you need to be on 3.0.0-beta.3 of extract-text-webpack-plugin if you are using Webpack v3.

I'm going to leave this issue open for the time being, once the upstream fix & the update in etwp land, we can revisit this to see if there is still an issue with rebuild times.

[alexander-akait]

@raiprabh can your update to 3.0.0-rc.0 and check?

[joshwiens]

@evilebottnawi - I evidently missed a chunk.module in there somewhere. There will be another rc build today at some point.

[alexander-akait]

@d3viant0ne seems yep, now i migrate own repos to webpack 3 and get warning:

DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.

[joshwiens]

I'm activly working on this & trying to figure out what it's still rendering css in the wrong order

[joshwiens]

@raiprabh - Please pick up extract-text-webpack-plugin@3.0.0-rc.1 ( requires webpack@3.1.0 ) and let me know if you are still seeing a performance issue.

[psr-ai]

@d3viant0ne - sure, i'll try it out and post my observations today.

[ova2]

@d3viant0ne I still have the warning

"DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead."

My package.json: https://github.com/ova2/angular-development-with-primeng/blob/master/angular-primeng-seed-for-authors/package.json

Simple try to execute npm run start:prod What is wrong in my webpack config? I use all latest dependencies.

[joshwiens]

@ova2 - I'm still seeing the deprecation warning as well, i'll get it sorted.