如何使用 Webpack 获取异步块的供应商块名称？

Question

假设我有 3 个由动态导入创建的异步块：

const Notes = lazy(() => import(/* webpackChunkName: "notes" */ 'pages/Notes'))
const Lists = lazy(() => import(/* webpackChunkName: "lists" */ 'pages/Lists'))
const Files = lazy(() => import(/* webpackChunkName: "files" */ 'pages/Files'))

将生成：

notes.g3g43g.js
lists.534535.js
files.234f8t.js

每个块都包含它自己的供应商依赖项。

所以在notes.g3g43g.js里面我们有react-big-calendar和lodash。

但是，当使用 SplitChunksPlugin 时，我们可以将chunks选项设置为all：

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: ({ context }) => (context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
      }
    }
  }
}

从这一点来看，react-big-calendar和lodash可能会被分成自己单独的供应商块（因此它们也可以被其他异步块使用），有时块名称将与包名称相同，但其他时候它可以只是入口点的 id（如466）。

我的问题是：我如何知道notes.g3g43g.js的异步供应商块是什么？

我一直在研究发送到HtmlWebpackPlugin的编译对象，但找不到任何可以指出note chunk 所依赖的内容：

new HtmlPlugin({
  filename: `${name}.html`,
  scriptLoading: 'module',
  templateContent: ({ compilation }) => {
    console.log(compilation)
  }
})

我有什么想法可以找到答案吗？

免责声明：我尝试做的是生成多个 html 文档（每个路由一个），然后在文档中内联所有相关脚本的预加载。

笔记.html：

<head>
  <script type="module" src="js/runtime.dc0c50.js"></script>
  <script type="module" src="js/%40emotion.16b5a2.js"></script>
  <script type="module" src="js/react-dom.db73d8.js"></script>
  <script type="module" src="js/main.f337ee.js"></script>
</head>

<body>
  <link rel="preload" href="js/notes.g3g43g.js" as="script">
  <link rel="preload" href="js/react-big-calendar.35994c.js" as="script">
  <link rel="preload" href="js/466.f9ej43.js" as="script">

  <div id="root"></div>
</body>

这将防止到 CDN 的额外往返，因为每个块已经拥有其所有依赖项。