如何为Webpack入口查找块

Question

我正在使用webpack来现代化一个遗留的多页面ASP.NET Web Forms应用程序。在使用SplitChunksPlugin并使用chunks: 'all'选项去重我的捆绑包时，我已经取得了相当不错的成果。但是这会产生一些额外的JS束，所有这些束都需要与原始入口束一起在script标签中包含。毫不奇怪，上面链接的文档也是如此说明的:

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

但我非常希望将这些初始入口块拆分，因此我正在尝试找到一种方法来获取所有这些额外块并将它们包含在脚本标记中。似乎标准建议是使用HtmlWebpackPlugin生成一个包含所有脚本标记的HTML页面，但这对我来说无效（至少在其默认配置中）至少有两个原因：

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

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

有没有办法在不通过hack-hoops的情况下自动确定给定条目块的依赖关系中的哪些是分离的块？

- Bondolin

---

你最终解决了这个问题吗？尽管看起来像是一个相当基本的用例，但似乎只有你还有这个问题。 - Benjamin Hodgson

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

- Junior Tour

Answer 2

更简单地说，要实现与@Junior Tour相同的结果，您还可以使用generate属性的entries参数。

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

- Florian Richard