Webpack devserver всегда обновляется с использованием замены горячего модуля в нескольких конфигурациях - PullRequest
1 голос
/ 10 ноября 2019

Мой проект имеет две разные конфигурации веб-пакетов - одну с выводом 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.

enter image description here

Поскольку первое существует, а второе нет, Webpacks HMR всегда полностью перезагружает страницу, отвергая цель HMR.

Мне кажется, что проблема заключается в одной из двух вещей:

  1. Webpack не генерирует горячее обновление json для всех конфигураций, даже если только одна измененная
  2. 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);
...

...