My project has two different webpack configurations - one with the output intro.js and one with the output app.js. I'm trying to get Hot Module Replacement (HMR) to work, but I encounter the following issue:
When changing code that's relevant to one of the configuration, webpack generates the relevant hot-update for that configuration only. In this case, only for hash 8c45d20a9bf289f9ebe1:
ℹ ｢wdm｣: Compiling...
ℹ ｢wdm｣: Hash: 436897b06fc9e0056f80ce14a2ba24d3726d803d
Version: webpack 4.41.2
Child
Hash: 436897b06fc9e0056f80
Time: 8135ms
Built at: 11/10/2019 1:02:26 PM
Asset Size Chunks Chunk Names
intro.min.js 647 KiB main [emitted] main
intro.min.js.map 673 KiB main [emitted] [dev] main
Entrypoint main = intro.min.js intro.min.js.map
[0] multi (webpack)-dev-server/client?http://ophers-macbook.local:8000 (webpack)/hot/only-dev-server.js webpack-dev-server/client?http://ophers-macbook.local:8000 webpack/hot/only-dev-server ./dist/_eko_/introIndex.js 76 bytes {main} [built]
[../../kyle/eko-cli/node_modules/strip-ansi/index.js] /Users/opherv/dev/kyle/eko-cli/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[../../kyle/eko-cli/node_modules/webpack-dev-server/client/index.js?http://ophers-macbook.local:8000] (webpack)-dev-server/client?http://ophers-macbook.local:8000 4.29 KiB {main} [built]
[../../kyle/eko-cli/node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[../../kyle/eko-cli/node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[../../kyle/eko-cli/node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {main} [built]
[../../kyle/eko-cli/node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[../../kyle/eko-cli/node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[../../kyle/eko-cli/node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[../../kyle/eko-cli/node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[../../kyle/eko-cli/node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[../../kyle/eko-cli/node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[../../kyle/eko-cli/node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.34 KiB {main} [built]
[../../kyle/eko-cli/node_modules/webpack/hot/only-dev-server.js] (webpack)/hot/only-dev-server.js 2.52 KiB {main} [built]
[./dist/_eko_/introIndex.js] 1.52 KiB {main} [built]
+ 99 hidden modules
Child
Hash: ce14a2ba24d3726d803d
Time: 395ms
Built at: 11/10/2019 1:04:27 PM
Asset Size Chunks Chunk Names
8c45d20a9bf289f9ebe1.hot-update.json 46 bytes [emitted] [immutable] [hmr]
app.min.js 527 KiB main [emitted] main
app.min.js.map 454 KiB main [emitted] [dev] main
main.8c45d20a9bf289f9ebe1.hot-update.js 1.42 KiB main [emitted] [immutable] [hmr] main
main.8c45d20a9bf289f9ebe1.hot-update.js.map 472 bytes main [emitted] [dev] main
Entrypoint main = app.min.js main.8c45d20a9bf289f9ebe1.hot-update.js app.min.js.map main.8c45d20a9bf289f9ebe1.hot-update.js.map
[0] multi (webpack)-dev-server/client?http://ophers-macbook.local:8000 (webpack)/hot/only-dev-server.js webpack-dev-server/client?http://ophers-macbook.local:8000 webpack/hot/only-dev-server ./dist/_eko_/index.js 76 bytes {main}
[../../kyle/eko-cli/node_modules/strip-ansi/index.js] /Users/opherv/dev/kyle/eko-cli/node_modules/strip-ansi/index.js 161 bytes {main}
[../../kyle/eko-cli/node_modules/webpack-dev-server/client/index.js?http://ophers-macbook.local:8000] (webpack)-dev-server/client?http://ophers-macbook.local:8000 4.29 KiB {main}
[../../kyle/eko-cli/node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main}
[../../kyle/eko-cli/node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main}
[../../kyle/eko-cli/node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {main}
[../../kyle/eko-cli/node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main}
[../../kyle/eko-cli/node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main}
[../../kyle/eko-cli/node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main}
[../../kyle/eko-cli/node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main}
[../../kyle/eko-cli/node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main}
[../../kyle/eko-cli/node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main}
[../../kyle/eko-cli/node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.34 KiB {main}
[../../kyle/eko-cli/node_modules/webpack/hot/only-dev-server.js] (webpack)/hot/only-dev-server.js 2.52 KiB {main}
[./dist/_eko_/index.js] 897 bytes {main}
+ 38 hidden modules
ℹ ｢wdm｣: Compiled successfully.
However, the HMR client tries to find the update file for BOTH hashes - 8c45d20a9bf289f9ebe1 and 436897b06fc9e0056f80.
Since the former exists but latter doesn't, Webpacks HMR always full-reloads the page defeating the purpose of HMR.
I feel like the issue is one of two things:
- Webpack doesn't generate the hot update json for all configurations, even if only one changed
- Webpack tries to access the
intro.jshot update json even though none of the relevant files for that configuration changes.
How can I solve this and prevent the full-page reload when it's not necessary?
Here's some of my principal code
...
devServerOptions = {
public: `${host}:${options.port}`,
disableHostCheck: true,
hot: true,
inline: true,
contentBase: path.resolve(projectRoot),
stats: { colors: true },
},
...devServerOptions
};
const configs = [introBaseConfig, appBaseConfig];
configs.forEach((config, index) => {
// Add to the current entry two additional entries
config.entry = [`webpack-dev-server/client?http://${host}:${options.port}`,
'webpack/hot/only-dev-server',
].concat(Array.isArray(config.entry) ? config.entry : config.entry);
// Add the hot module replacement plugin
config.plugins = [
new webpack.HotModuleReplacementPlugin()
];
delete config.output.path;
// this is where 'hot' updates will be fetched from
config.output.publicPath = `http://${host}:${options.port}${webpack_output_path}/`;
});
const server = new WebpackDevServer(webpack(configs), devServerOptions);
...
