面试题：Webpack自定义插件实现

Question

假设需要开发一个Webpack插件，该插件能在打包结束后在控制台输出所有生成chunk的名称及其大小，请描述实现该插件的思路，并给出关键代码示例。

Answer 1

实现思路

1. 定义插件类：创建一个JavaScript类，作为Webpack插件。
2. 绑定事件钩子：利用Webpack的compilation事件钩子，在打包即将结束时获取生成的chunk信息。
3. 获取chunk名称和大小：通过compilation.chunks获取所有chunk，遍历计算每个chunk的大小。
4. 控制台输出：将chunk名称及其大小输出到控制台。

关键代码示例

class ChunkSizePlugin {
  apply(compiler) {
    compiler.hooks.emit.tap('ChunkSizePlugin', compilation => {
      const chunks = compilation.chunks;
      chunks.forEach(chunk => {
        let size = 0;
        chunk.files.forEach(file => {
          const asset = compilation.assets[file];
          if (asset) {
            size += asset.size();
          }
        });
        console.log(`Chunk Name: ${chunk.name}, Size: ${size} bytes`);
      });
    });
  }
}

module.exports = ChunkSizePlugin;

在Webpack配置中使用该插件：

const ChunkSizePlugin = require('./ChunkSizePlugin');

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