Мой проект имеет две разные конфигурации веб-пакетов - одну с выводом intro.js
и одну с выводом app.js
. Я пытаюсь заставить работать горячую замену модуля (HMR), но сталкиваюсь со следующей проблемой:
При изменении кода, относящегося к одной из конфигураций, веб-пакет генерирует соответствующую hot-update
только для этой конфигурации,В этом случае только для хеша 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.
Однако клиент HMR пытается найти файл обновления для ОБА хэшей - 8c45d20a9bf289f9ebe1
и 436897b06fc9e0056f80
.
Поскольку первое существует, а второе нет, Webpacks HMR всегда полностью перезагружает страницу, отвергая цель HMR.
Мне кажется, что проблема заключается в одной из двух вещей:
- Webpack не генерирует горячее обновление json для всех конфигураций, даже если только одна измененная
- Webpack пытается получить доступ к
intro.js
горячее обновление json, хотя ни один из соответствующих файлов для этой конфигурации не изменяется.
Как я могу решить эту проблему и предотвратить перезагрузку полной страницы, когда в этом нет необходимости?
Вот мой основной код
...
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);
...