Webpack中如何解析SplitChunks生成的chunk文件获取所有依赖？

1. 用 html-webpack-plugin 自动注入依赖（最省心） #

这是最常用的方案，它会自动分析Webpack生成的所有chunk，把对应入口需要的依赖（比如你拆分出来的vendors chunk）和入口JS自动插入到HTML里，完全不用手动写script标签。

多入口场景的配置示例：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js'
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'page1.html',
      template: './src/page1.html',
      chunks: ['vendors', 'page1'] // 指定要注入当前页面的chunk
    }),
    new HtmlWebpackPlugin({
      filename: 'page2.html',
      template: './src/page2.html',
      chunks: ['vendors', 'page2']
    })
  ]
};

打包后生成的HTML会自动包含vendors.xxx.js和对应入口的JS文件，顺序也会按依赖关系排好。

2. 用 webpack-manifest-plugin 生成依赖清单 #

如果不想自动注入HTML，而是想自己控制依赖加载逻辑，可以用这个插件生成一个manifest.json文件，里面包含所有chunk的文件名映射，你可以读取这个文件来获取每个入口对应的依赖。

配置示例：

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

module.exports = {
  // ... 其他Webpack配置
  plugins: [
    new WebpackManifestPlugin({
      fileName: 'manifest.json',
      publicPath: '/'
    })
  ]
};

生成的manifest.json大概长这样：

{
  "vendors.js": "/vendors.abc123.js",
  "page1.js": "/page1.def456.js",
  "page2.js": "/page2.ghi789.js"
}

之后你可以写脚本读取这个文件，根据入口名称匹配对应的chunk文件，再动态插入到HTML中。

3. 自定义Webpack插件解析chunk依赖关系 #

如果上面的插件都满足不了你的需求，可以自己写一个简单的Webpack插件，在打包过程中提取所有chunk的依赖关系，生成自定义的依赖文件。

示例插件代码：

class ChunkDependencyPlugin {
  apply(compiler) {
    compiler.hooks.emit.tap('ChunkDependencyPlugin', (compilation) => {
      // 提取每个chunk的名称、文件和依赖的chunk列表
      const chunkDependencies = compilation.chunks.map(chunk => ({
        chunkName: chunk.name,
        outputFiles: chunk.files,
        dependentChunks: chunk.chunks.map(depChunk => depChunk.name)
      }));

      // 将依赖信息写入chunk-dependencies.json文件
      compilation.assets['chunk-dependencies.json'] = {
        source: () => JSON.stringify(chunkDependencies, null, 2),
        size: () => Buffer.byteLength(JSON.stringify(chunkDependencies))
      };
    });
  }
}

module.exports = {
  // ... 其他Webpack配置
  plugins: [new ChunkDependencyPlugin()]
};

打包后会生成chunk-dependencies.json，里面清晰列出每个chunk的依赖关系，你可以根据这个文件做任何自定义的依赖加载逻辑。

内容的提问来源于stack exchange，提问作者slushpuppy