如何在 Webpack 插件中获取经处理但未打包的原生 ES 模块源码-js教程-PHP中文网

如何在 Webpack 插件中获取经处理但未打包的原生 ES 模块源码

本文介绍一种通过 Webpack 自定义插件在构建后期提取已过 loader 处理、别名解析和宏替换，但尚未被 Webpack 封装（如 __webpack_require__）的原始 ES 模块源码的方法，并将其按原始目录结构输出为独立 .js 文件。

本文介绍一种通过 webpack 自定义插件在构建后期提取已过 loader 处理、别名解析和宏替换，但尚未被 webpack 封装（如 `__webpack_require__`）的原始 es 模块源码的方法，并将其按原始目录结构输出为独立 `.js` 文件。

在基于 Webpack 的现代前端项目中，常需保留“模块化可执行性”——即让浏览器原生支持的 ES 模块（type="module"）能直接加载、运行，而不依赖 Webpack 的运行时或 bundle 封装。尤其在微前端、文档站点嵌入、或渐进式增强场景下，开发者往往希望：

保留 import 语句的语义（如 import { foo } from 'utils'），
已完成路径别名（resolve.alias）和宏替换（如 process.env.NODE_ENV）等预处理，
但跳过 Webpack 的模块封装、依赖图合并与运行时注入。

Webpack 官方并未提供“导出纯净处理后源码”的内置能力，但其插件系统（尤其是 compilation.modules 和 Module#originalSource()）恰好提供了所需钩子。核心思路是：在 compiler.hooks.done 阶段遍历所有已处理完毕的模块，对类型为 'javascript/esm' 的模块调用 originalSource()?.source() 获取其经过所有 loader 和 resolver 处理后的最终字符串内容，再按原始资源路径（module.resource）写入文件系统。

以下是一个生产可用的 TypeScript 实现插件（兼容 Webpack 5+）：

import * as webpack from 'webpack';
import * as path from 'path';
import * as fs from 'fs';

class SourceInterceptorPlugin {
  handleModulesRecursively(
    modules: Set<webpack.module>,
    sources: Map<string string>
  ) {
    for (const module of modules) {
      // 仅处理原生 ES 模块（跳过 JSON、CSS、动态 import 包裹等）
      if (module.type !== 'javascript/esm') continue;

      // 递归处理嵌套模块（如某些内联 loader 或 AST 转换生成的子模块）
      const innerModules = (module as any)['modules'] as Set<webpack.module>;
      if (innerModules && innerModules.size > 0) {
        this.handleModulesRecursively(innerModules, sources);
        continue;
      }

      // 获取原始处理后源码（非 webpack 封装版）
      const source = module.originalSource()?.source();
      if (!source || typeof source !== 'string') {
        console.warn(`[SourceInterceptor] Skipped module: ${module.identifier()}`);
        continue;
      }

      // 确保是 NormalModule（标准 JS 模块），避免 runtime / manifest 模块
      if (module instanceof webpack.NormalModule) {
        sources.set(module.resource, source);
      }
    }
  }

  apply(compiler: webpack.Compiler) {
    compiler.hooks.done.tapAsync('SourceInterceptorPlugin', (stats, callback) => {
      const compilation = stats.compilation;
      const sources = new Map<string string>();

      // 递归收集所有 ESM 模块源码
      this.handleModulesRecursively(compilation.modules, sources);

      // 输出到配置的 output.path（支持自定义 dist 目录）
      const outputDist = compilation.outputOptions.path || process.cwd();
      for (const [resourcePath, source] of sources) {
        // 保持原始目录结构：/src/utils/foo.js → /dist/src/utils/foo.js
        const relPath = path.relative(process.cwd(), resourcePath);
        const fullPath = path.join(outputDist, relPath);

        // 创建父目录并写入
        fs.mkdirSync(path.dirname(fullPath), { recursive: true });
        fs.writeFileSync(fullPath, source, 'utf8');
      }

      console.log(`✅ SourceInterceptorPlugin: emitted ${sources.size} ES modules to ${outputDist}`);
      callback();
    });
  }
}

export default SourceInterceptorPlugin;</string></webpack.module></string></webpack.module>

使用方式（在 webpack.config.js 中）：

通义灵眸

通义灵眸是一款AI文本写作工具，阿里通义推出的AI数字人生产平台。

下载

const SourceInterceptorPlugin = require('./plugins/SourceInterceptorPlugin');

module.exports = {
  // ... 其他配置（含 alias、自定义 loader 等）
  plugins: [
    new SourceInterceptorPlugin(),
  ],
};

⚠️ 重要注意事项：

此插件提取的是 loader 链处理后、resolver 解析后、但未被 Webpack 运行时包装 的源码，因此 import 语句仍为相对路径或别名（如 import 'lodash'），需配合 <script type="importmap"></script> 或服务端重写规则解析至真实路径；
module.originalSource() 返回的是 Source 对象（来自 webpack-sources 库），其 .source() 方法才给出最终字符串，切勿误用 module.source()（它返回的是 Webpack 封装后的代码）；
某些 Webpack 内部模块（如 HarmonyCompatibilityDependency 注入的辅助代码）不参与此流程，无需担心污染输出；
若项目启用 experiments.outputModule: true（输出 ESM bundle），请确保本插件在 done 钩子执行，此时 compilation.modules 已完全稳定。