Question

在完成其各个子过程后，生成了捆绑的JS文件和捆绑的CSS文件，我需要获取这些文件名并在构建过程中对其手动执行最终操作。如何修改我的webpack.config.js以访问这些最终文件名（例如bundle-9aef5a96e.en-US.js）？

我需要类似的东西：

finalOperation: (js, css) => { /* code using js filename and css filename */ }

Answer 1

首先，您可以在done阶段使用Webpack compiler hook来加入最终的构建操作。编译完成后，将执行done钩子，并在其回调中收到一个stats参数（请参见Link）。

在stats中，您可以通过assets抓取从编译中发出的输出文件，该文件将输出文件名作为键并将其映射到asset object。例如

Object.keys(stats.compilation.assets) // emitted file names, what you want
Object.values(stats.compilation.assets) // details about each asset

或者，您也可以遍历大块来检索所有文件：

stats.compilation.chunks.map(c => c.files)

有关stats对象的更多信息是here。将这样的代码作为插件添加到您的webpack.config.js中：

plugins: [
  // ...
  {
    apply: compiler => {
      compiler.hooks.done.tap("My-FinalizePlugin", stats => {
        // your finalize build step
        console.log(stats.compilation.chunks.map(c => c.files))
        console.log(Object.keys(stats.compilation.assets))
      })
    }
  }
]

希望，能完成工作。

如何获取JS和CSS的webpack输出文件的名称？

1 个答案: