Webpack 代码拆分 - 通过请求单个块自动加载所有块？

Question

我正在使用 Webpack 4.x 并在我的配置中有以下内容：

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

这导致我的项目分为三个部分：

• 应用程序.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',
    }),
  ]