3

我正在使用 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 自动确定哪些拆分块是给定条目块的依赖项？

4

1 回答 1

0

将此插件与您的 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"
  ]
  // ...
}
于 2021-09-26T02:47:18.630 回答