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

Question

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

    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

据我所知，您基本上是在用另一个字符串替换一些字符串。

如果你正在运行 webpack 5，我相信你可以使用 processAssets 钩子。

这是一个您可以根据自己的情况进行调整的示例：

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()],
};