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自动需要/导入其他块？

- Slbox

---

嘿，你最终解决了这个问题吗？ - Eric Guan

不好意思，我只能手动加载所有的块。抱歉让你失望了。 - Slbox

非常烦人，这是不可能的。 - Pengő Dzsó

我不知道这是否不可能，但如果是的话，没有人出现说过。 - Slbox

你尝试过动态的 'import()' 语法吗？ - Subash

它会起作用，但是将所有内容重构为动态导入将非常麻烦。 - Kyryl Stronko

Answer 1

我们可以通过以下代码解决这个问题：

在 "entry" 中，您可以将项目分成“块”（使用 Webpack 术语），然后可以使用 "HtmlWebpackPlugin" 自动生成包含给定块的正确脚本的 HTML 文件。请保留 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',
    }),
  ]

- Slbox