Question

我仍然不熟悉构建Webpack插件，因此我对如何正确地将资源添加到编译中提出了疑问。

我正在构建此插件：rebabel-webpack-plugin
简单来说就是编译文件并用babel重新编译它们以将它们转换为fx ES 5兼容文件（我知道......这看起来很奇怪......为什么在项目自述文件中）。

这实际上效果很好，但我的资产没有出现在webpack的Stats部分（例如compiler.getStats()）

我将重新编译的资源添加到compilation.assets列表中，但只有我的初始条目文件和动态命名块显示在stats对象中。

那么如何让我的重新编译的assests出现在webpacks 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);

对我而言似乎有点hacky所以我想知道是否有更好的方法来做到这一点。但是......很有效。

Webpack - 将资产添加到统计数据

1 个答案: