如何查找 Webpack 条目的块

Question

我正在使用 webpack 对旧式多页 ASP.NET Web 窗体应用程序进行现代化改造。在我尝试使用SplitChunksPlugin 使用chunks: 'all' 选项对我的捆绑包进行重复数据删除之前，我已经取得了相当大的成功。不幸的是，这使得一些额外的 JS 包都需要与原始条目包一起包含在 script 标记中。毫不奇怪，上面链接的文档说明了很多：

默认情况下，[插件] 仅影响按需块，因为更改初始块会影响 HTML 文件应包含以运行项目的脚本标签。

但我非常希望将这些初始条目块拆分，因此我试图找到一种方法将所有这些额外块包含在脚本标签中。似乎这里的标准建议是使用HtmlWebpackPlugin 生成一个包含所有脚本标签的 HTML 页面，但这对我不起作用（至少在其默认配置中）至少有两个原因：

1. 这是一个 Web 窗体项目。不能简单地篡改 aspx 文件。
2. 即使我确实找到了一种方法来在每次运行 webpack 时生成一些有效的 aspx 文件（我认为这是可行的，但这是主要困难）；似乎 HtmlWebpackPlugin 只为 所有 块生成脚本标签，或者手动选择它们的子集（使用 chunks: [] 选项）。

要详细说明第二点，并回答我的问题——我可以对拆分块进行一些手动分析以构建依赖关系图并手动将每个块包含在 aspx 中，但这显然不是一种可维护的方法。我希望 HtmlWebpackPlugin 可以提供某种方式，至少表明该块最终由该条目使用，或者该条目使用这些块等，但我没有发现其输出中存在任何此类关系。

有没有什么办法不通过hack-hoops来自动确定哪些拆分块是给定入口块的依赖项？

Answer 1

在你的 webpack 配置中安装这个插件：

npm install webpack-manifest-plugin --save-dev

// webpack.config.js

const ManifestPlugin = require('webpack-manifest-plugin')

concatMerge(configuration, {
  // ...
  plugins: [
    new ManifestPlugin({
      fileName: 'prod.manifest.json',
      generate: (seed, files) => {
        const entrypoints = new Set()
        files.forEach(
          (file) => ((file.chunk || {})._groups || []).forEach(
            (group) => entrypoints.add(group)
          )
        )
        const entries = [...entrypoints]
        const entryArrayManifest = entries.reduce((acc, entry) => {
          const name = (entry.options || {}).name
            || (entry.runtimeChunk || {}).name
          const files = [].concat(
            ...(entry.chunks || []).map((chunk) => chunk.files)
          ).filter(Boolean)
          return name ? {...acc, [name]: files} : acc
        }, seed)
        return entryArrayManifest
      }
    }),
  ],
}

它将为每个条目或路由生成一个包含块的prod.manifest.json：

{
  "entryOne": [
    "main.common.d7791ce7a1e7ba394.css",
    "main.common.d7791ce7a1e7ba394.js",
    "main.entryOne.eb614be915641d465.js"
  ],
  "a-route": [
    "main.common.d7791ce7a1e7ba394.css",
    "main.a-routes.14b91be915641d465.js"
  ]
  // ...
}