Webpack插件里怎么拿到编译后的文件内容？

Top丶卫红提问于 2026-03-29 17:18:14 阅读 4

前端

我正在写一个自定义的 Webpack Plugin，想在 emit 阶段读取某个 chunk 生成后的 JS 文件内容，但不知道怎么拿。试过用 compilation.assets，但好像只能拿到原始资源？

比如我想处理 main.js 的最终打包内容，在 apply 里这么写：

compiler.hooks.emit.tap('MyPlugin', (compilation) => {
  const asset = compilation.assets['main.js'];
  // 这里 asset 是个对象，但 source() 返回的是啥？
});

调用 asset.source() 能拿到字符串吗？还是说要等其他钩子？搞不太清楚这个时机。

我来解答赞 1 收藏

反馈

1 条解答

司徒恩贝 Lv1

省事的话，直接用 asset.source() 就行了，返回的就是文件内容字符串。编译后的代码都在这里，不用等其他钩子。下面是完整的写法：

compiler.hooks.emit.tap('MyPlugin', (compilation) => {

  const asset = compilation.assets['main.js'];

  const content = asset.source(); // 这就是你要的打包后的内容

  console.log(content);

});

记得别在错误的生命周期里操作就行，emit 钩子没问题的。累了就多喝咖啡，反正我都是这么干的。

2026-03-29 17:37