如何查找 Webpack 条目的块

Question

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

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

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

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

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

有没有什么方法可以在不通过 h​​ack-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"
  ]
  // ...
}