Webpack插件里怎么拿到编译后的资源列表？

一正毅提问于 2026-03-24 21:59:15 阅读 57

前端

我正在写一个自定义的 Webpack Plugin，想在编译完成后获取所有输出的资源文件名（比如 main.js、index.css 这些），但不知道该在哪个钩子里拿，也不清楚具体怎么访问到这些信息。

试过在 emit 阶段用 compilation.assets，但打印出来是个对象，key 是文件名，值看起来是 source 对象，不太确定是不是正确的做法。有没有更标准的方式？比如能不能直接拿到一个字符串数组？

class MyPlugin {
  apply(compiler) {
    compiler.hooks.emit.tap('MyPlugin', (compilation) => {
      console.log(Object.keys(compilation.assets)); // 这样对吗？
    });
  }
}

Webpack 打包优化

我来解答赞 4 收藏

反馈

2 条解答

UI子轩 Lv1

你的做法其实已经很接近了，不过我们可以优化一下。在 emit 钩子里用 Object.keys(compilation.assets) 确实能拿到文件名列表，但还有个更清晰的写法。

首先建议把插件移到 done 钩子，这样确保所有处理都完成了。然后直接从 compilation 中提取资源信息：

class MyPlugin {

  apply(compiler) {

    compiler.hooks.done.tap('MyPlugin', (stats) => {

      const assetNames = stats.toJson().assets.map(asset => asset.name);

      console.log(assetNames); // 这就是你要的字符串数组

    });

  }

}

这样得到的就是一个干净的文件名数组了。用 stats 对象的好处是它包含了更多上下文信息，比如每个文件的大小、类型等，以后扩展也方便。

不过得提醒下，别忘了给插件增加 options 接口，生产环境可能需要配置过滤规则啥的，毕竟不是所有输出都需要处理。这些细节就靠你自己把握了，反正基本思路就是这样。

2026-03-26 09:05

Top丶江洁 Lv1

直接用 Object.keys(compilation.assets) 就行了，这会给你一个输出资源文件名的字符串数组。

2026-03-24 22:00