如何在Webpack插件中获取处理后的未打包原生JS模块代码？

要拿到经过loader处理、别名替换但未被webpack打包的单个源码文件，compilation.hooks.processAssets 是比emit更合适的钩子——它在所有资源处理完成（包括你的自定义loader、alias替换）但还没开始生成最终打包文件的阶段触发，能直接拿到处理后的单模块源码。

具体实现步骤 #

1. 写一个自定义Webpack插件，接入processAssets钩子
2. 筛选出项目自身的源码模块（排除webpack runtime、第三方依赖等冗余模块）
3. 提取每个模块的处理后源码，按原目录结构写入指定目录

插件代码示例 #

const { ProcessAssetsStage } = require('webpack');
const path = require('path');
const fs = require('fs-extra');

class ExtractProcessedModulesPlugin {
  constructor(options = {}) {
    this.outputDir = options.outputDir || './processed-modules';
  }

  apply(compiler) {
    compiler.hooks.compilation.tap('ExtractProcessedModulesPlugin', (compilation) => {
      compilation.hooks.processAssets.tap(
        {
          name: 'ExtractProcessedModulesPlugin',
          // 选择资源处理完成后的阶段
          stage: ProcessAssetsStage.PROCESS_ASSETS_STAGE_ADDITIONAL,
        },
        () => {
          compilation.modules.forEach(module => {
            // 过滤掉非项目源码模块，可根据项目调整判断规则
            if (!module.resource || module.resource.includes('node_modules') || module.resource.includes('webpack/runtime')) {
              return;
            }

            // 获取处理后的纯源码
            const source = module.source();
            const code = typeof source === 'string' ? source : source.source();

            // 生成和原项目一致的目录结构
            const relativePath = path.relative(compiler.context, module.resource);
            const outputPath = path.join(this.outputDir, relativePath);

            // 确保目录存在并写入文件
            fs.ensureDirSync(path.dirname(outputPath));
            fs.writeFileSync(outputPath, code);
          });
        }
      );
    });
  }
}

module.exports = ExtractProcessedModulesPlugin;

在Webpack配置中使用 #

把插件添加到你的webpack配置的plugins数组即可，完全不影响原有的loader和alias流程：

const ExtractProcessedModulesPlugin = require('./path/to/your/plugin-file');

module.exports = {
  // 原有webpack配置（loader、alias等）
  plugins: [
    // 其他插件...
    new ExtractProcessedModulesPlugin({
      outputDir: './dist/processed-modules' // 自定义输出目录
    })
  ]
};

注意事项 #

• 模块筛选规则可根据项目调整，比如如果你的项目有特定后缀的文件，可添加后缀判断
• 如果需要导出sourcemap，可通过source.map()获取map内容并单独写入.map文件
• 若使用gulp封装的webpack，只需确保上述配置被正确传入webpack实例即可

内容的提问来源于stack exchange，提问作者Jurijs Kovzels