如何查找 Webpack 条目的块

Question

我正在使用 webpack 对遗留的多页面 ASP.NET Web 表单应用程序进行现代化改造。在我尝试使用 SplitChunksPlugin 使用其

chunks: 'all'

选项对我的包进行重复数据删除之前，我已经取得了相当大的成功。不幸的是，这会产生一些额外的 JS 包，这些包都需要与原始条目包一起包含在

script

标签中。毫不奇怪，上面的链接文档说明了这一点：

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

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

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

   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"
  ]
  // ...
}

Answer 2

更简单地说，为了获得与 @Junior Tour 相同的结果，您还可以使用

entries

属性的

generate

参数：

plugins: [
    new WebpackManifestPlugin(
    {
        fileName: 'prod.manifest.json',
        generate: (seed, files, entries) => {
            return entries;
        }
    }),
],