Question

我的项目有两种不同的Webpack配置-一种具有输出intro.js，一种具有输出app.js。我正在尝试使热模块更换（HMR）工作，但遇到以下问题：

当更改与一种配置相关的代码时，webpack仅为该配置生成相关的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);
...

Webpack devserver始终使用具有多种配置的热模块替换来刷新

0 个答案: