Разделение кода в Webpack - Автоматически загружать все чанки, запрашивая один чанк?

Question

Я использую Webpack 4.x и имею следующее в моей конфигурации:

splitChunks: {
    chunks: 'all',
},
runtimeChunk: true

Это приводит к трем частям в моем проекте:

• app.prod.js
• 1.app.prod.js
• 2.app.prod.js

Я хотел бы загрузить все три сценария, используя только один начальный запрос. Причина этого заключается в том, что я хотел бы использовать функцию "предварительной загрузки" в Electron по соображениям безопасности, которая принимает один сценарий.

Есть ли способ получить начальный app.prod.js автоматически требовать / импортировать дополнительные чанки?

Answer 1

Мы смогли решить эту проблему для нашего случая с помощью такого кода:

Подentryвы можете разделить свой проект на «куски» (используя терминологию Webpack), а затем вы можете использоватьHtmlWebpackPluginдля создания файлов HTML с автоматически включенными правильными сценариями для данного фрагмента.

        optimization: {
    runtimeChunk: 'single',
  },
  entry: {
    rendererA: `${basePath}/src/windowA/`,
    rendererB: `${basePath}/src/windowB/`,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(basePath, 'src/index.html'),
      chunks: ['rendererA'],
      filename: 'rendererA.html',
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(basePath, 'src/index.html'),
      chunks: ['rendererB'],
      filename: 'rendererB.html',
    }),
  ]