Webpack 插件 API - 更新资产内容并重建哈希

Question

我正在编写一个插件，需要在捆绑所有模块后交换某个 JSON 文件的内容。我分两步实现：加载器用占位符替换内容，插件替换占位符。

加载程序如下所示：

const loader = function(source) {
  this.clearDependencies();
  return JSON.stringify('REGENERATED_JSON');
};

插件大致如下所示：

compilation.hooks.optimizeChunkAssets.tapAsync(PLUGIN_NAME, (chunks, callback) => {

  chunks.forEach((chunk) => {
    chunk.files.forEach((filePath) => {
      const asset = compilation.assets[filePath];
      const source = asset.source();

      replacements.forEach((id) => {
        const pattern = 'JSON.parse("\"REGENERATED_JSON\"")';
        const index = source.indexOf(pattern);

        if (index < 0) return;

        const content = JSON.stringify(json_content, null, 2);
        const updatedSource = new ReplaceSource(asset);

        updatedSource.replace(index, index + pattern.length, content);
        compilation.assets[filePath] = updatedSource;
      });
    });
  });

  callback();
});

这段代码有几个问题：

易碎，因为它与 JSON.parse 调用相关联。在将文件导入为 JSON.
内容哈希没有被重建，文件大小评估也没有，JSON 可能非常大但 Webpack 不知道。

有没有办法在 webpack 中解决这些问题？

Answer 1

这条评论帮助我解决了问题：https://github.com/webpack/webpack/issues/8830#issuecomment-580095801

简而言之：

在解析每个模块后使用compilation.hooks.finishModules.tap获取模块
然后在那里注入一个新的加载器，或者向有问题的模块添加信息（模块对象的权利）
使用 compilation.rebuildModule(module, callback) 触发这些模块的重建，使用内置 utils 包中的 promisify 转换为处理多个并行重建的承诺

Webpack 插件 API - 更新资产内容并重建哈希

Webpack plugin API - update content of an asset and rebuild hash

javascript

documentation

plugins

loader

webpack