Webpack-dev-server: Webpack 4 hot rebuild time twice as slow

[drewjenkins]

I apologize if I I should be posting this on the main webpack repo instead of here. If that's the case, let me know and I'll move it.

• Operating System: Mac OS High Sierra
• Node Version: 8.10.0
• NPM Version: 5.6.0
• webpack Version: 4.1.1

• webpack-dev-server Version: 3.1.1

• [x] This is a bug

• [ ] This is a modification request

Code

Note that the webpack file I posted isn't exactly what we have, but anything removed was just company info, me merging a common webpack file with our dev one to produce a single code snippet, and removing some unrelated/redundant info (e.g. multiple templates with similar content).

  // webpack.config.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const config = require('./webpack.common.config.js');
const Jarvis = require('webpack-jarvis');

module.exports = merge(config, {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  output: {
    publicPath: '/',
    filename: '[name]-[hash].js',
    crossOriginLoading: 'anonymous',
    chunkFilename: '[name]-[hash].js'
  },
  optimization: {
    noEmitOnErrors: true,
    namedModules: true,
  },
  plugins: [
    new CopyWebpackPlugin([{
      from: 'app/assets/images/favicon/',
      to: 'favicon/',
    }]),
    new CopyWebpackPlugin([{
      from: 'app/assets/images/square/logo.png',
      to: 'logo.png',
    }]),
    new ExtractTextPlugin({
      filename: '[name]-styles-[contenthash].css',
      allChunks: true,
    }),
    new DeterministicHash(),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new HtmlWebpackPlugin({
      template: 'templates/index.ejs',
      filename: 'index.html',
      inject: false,
      chunks: ['common', 'main'],
      appleTouchIconSizes: [57, 72, 114, 120, 144, 152],
    }),
    new Jarvis({port: 7003}),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      _DEVELOPMENT_: true,
    })
  ],
  module: {
    rules: [
      {
        test: /\.(otf|ttf|woff|woff2|png|jpg|svg|mp3|wav|aff|dic)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'assets/[name]-[sha1:hash:hex:8].[ext]'
            },
          },
        ]
      },
      {
        test: /\.s?css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                plugins: () => [
                  require('precss'),
                  require('autoprefixer'),
                ]
              }
            },
            'sass-loader'
          ]
        }),
      },
      {
        test: /\.jsx?$/,
        use: ['babel-loader'],
      },
    ]
  },
  entry: {
    main: [
      'babel-polyfill',
      'react-hot-loader/patch',
      'webpack/hot/only-dev-server',
      'webpack-dev-server/client?https://0.0.0.0:7001',
      './app/main.js',
    ],
  }
});

  // dev-server.js
const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.devconfig');
const ssl = require('./devssl');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  headers: {'Access-Control-Allow-Origin': '*'},
  hot: true,
  https: true,
  clientLogLevel: 'error',
  cert: ssl.cert,
  overlay: true,
  key: ssl.key,
  historyApiFallback: true,
  disableHostCheck: true,
  watchOptions: {
    ignored: /\/node_modules\/.*/,
  },
  stats: {
    assets: false,
    cached: false,
    cachedAssets: false,
    children: false,
    chunks: false,
    chunkModules: false,
    chunkOrigins: false,
    colors: true,
    depth: false,
    entrypoints: true,
    excludeAssets: /app\/assets/,
    hash: false,
    maxModules: 15,
    modules: false,
    performance: true,
    reasons: false,
    source: false,
    timings: true,
    version: false,
    warnings: true,
  },
}).listen(7001, '0.0.0.0', function(err, result) {
  console.log(`Serving chunks at path ${config.output.publicPath}`);
});

Expected Behavior

Similar, if not faster HMR

Actual Behavior

Hot reload time increased from ~5s to ~10s when upgrading to Webpack 4.

For Bugs; How can we reproduce the behavior?

Unsure if it reproduces in every case, but in our case we have a large webapp that spits out multiple entry points, with sass processing, along with a lot of other webpack features.

[benwilkes9]

I'm also experiencing this issue - just upgraded to web pack 4 and hot reload times have increased considerably

[SpaceK33z]

I can't fix this in webpack-dev-server, nearly everything regarding to HMR is done in webpack itself, WDS only serves it through a server.

[drewjenkins]

I kind of thought that may be the case. I'll move this issue over to the main webpack repo :)

For anyone else running into this, here's a link to the issue I created on the main Webpack repo https://github.com/webpack/webpack/issues/6767

[p3x-robot]

Same here, can't work Webpack anymore (just like UglifyJs3 about 4 times slower), looks the same with Webpack case.

[kulicuu]

Same here, first time using Webpack since February, and I thought the -w watch was broken, but it's just building slow.

[ajain17]

I had the same issue with Webpack version 4.27.1 and Node V8, V10. I just upgraded my node version to 11.11.0 and my initial build is down from 2 mins to 1min and HMR time is down from 2 mins to 12 seconds.

[gagangoku]

Did you try using --mode=development for dev builds ? It's quite fast for me: https://medium.com/@gagan_goku/hot-reloading-a-react-app-with-ssr-eb216b5464f1