javascript - 我可以在保存之前使用 webpack Hook 来修改文件输出吗？

Question

我想在 webpack 和 babel 处理文件后对其进行操作。有一个 emit在保存新文件之前触发的钩子(Hook)，但我看不到操作文件内容的方法。所以我决定使用 afterEmit Hook 读取刚刚写入的文件，对其进行修改，然后将其写回:

    plugins: [
      new class OutputMonitor {
        apply(compiler) {
          compiler.hooks.afterEmit.tap('OutputMonitor', compilation => {
            if (compilation.emittedAssets.has('index.js')) {
              let contents = fs.readFileSync('./dist/web/index.js', 'utf-8');
              // Strip out dynamic import() so it doesn't generate warnings.
              contents = contents.replace(/import(?=\("tseuqer-yb")/, 'console.log');
              // Strip out large and large-alt timezone definitions from this build.
              contents = contents.replace(large, 'null');
              contents = contents.replace(largeAlt, 'null');
              fs.writeFileSync('./dist/web/index.js', contents);
            }
          });
        }
      }()
    ],

这可以完成工作，但是有更好的方法吗？

Answer 1

据我所知，您基本上是在用另一个字符串替换一些字符串。
相信你可以使用 processAssets 如果您正在运行 webpack 5，则 Hook 。
这是一个可以适应您的情况的示例:

const { Compilation, sources } = require('webpack');

class Replace {
  apply(compiler) {
    compiler.hooks.thisCompilation.tap('Replace', (compilation) => {
      compilation.hooks.processAssets.tap(
        {
          name: 'Replace',
          stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE,
        },
        () => {
          // get the file main.js
          const file = compilation.getAsset('main.js');
          // update main.js with new content
          compilation.updateAsset(
            'main.js',
            new sources.RawSource(file.source.source().replace('a', 'b'))
          );
        }
      );
    });
  }
}
module.exports = {
  entry: './wp.js',
  plugins: [new Replace()],
};