Issue 1:
node v8.10.0

npm 5.6.0

os mac

webpack 4.6.0

Issue 2:
Originally posted this issue on webpack-dev-server's repo, but was told nearly all of HMR is handled by Webpack itself, so I am moving that issue over here.

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

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 from Webpack 3 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.