Webpack - 将资产添加到统计信息

Question

我对构建 Webpack 插件还是有点陌生，所以我有一个关于如何正确地将资源添加到编译中的问题。

我正在构建这个插件：rebabel-webpack-plugin
简单来说，就是获取编译后的文件并使用 babel 重新编译它们，将它们转译为 fx ES 5 兼容文件（我知道……这看起来很奇怪……原因在项目的自述文件中）。

这实际上工作得很好，但我的资源没有显示在 webpack 的

Stats

部分（例如

compiler.getStats()

）

我将重新编译的资源添加到

compilation.assets

列表中，但只有我的初始条目文件和动态命名块显示在统计对象中。

那么如何让我重新编译的资源显示在 webpack 的

stats

部分呢？

Answer 1

经过一番挖掘后，我想我找到了解决问题的方法。 看来我还需要将新创建的资产添加为块，并更改其中文件引用的名称。

所以下面的代码似乎可以解决问题：

function addPrefixToFile(prefix, file) {
  return file.replace(/(^|[/\\])([^/\\]+)$/, `$1${prefix}$2`);
}

const files = chunks.reduce((arr, chunk) => {
  if(!chunk.rendered) { return arr; }

  // Create chunk copy
  const copy = Object.assign(Object.create(chunk), {
    name: chunk.name ? `${prefix}${chunk.name}` : chunk.name,
    files: (chunk.files || []).map((file) => addPrefixToFile(file)),
    parents: chunk.parents.map(
      (parent) => Object.assign({}, parent, {
        files: (parent.files || []).map((file) => addPrefixToFile(file))
      })
    )
  });

  chunkCopies.push(copy);
}, []);

// ... further down the line ...
chunks.push(...chunkCopies);

对我来说，这似乎有点老套，所以我想知道是否有更好的方法来做到这一点。但是好吧...它有效。