Webpack插件能否像Loader一样实现文件转换？

我了解Loader的作用是转换模块，但如果存在某类文件需要Loader无法完成的特殊处理，是否可以开发Plugin来实现该功能？我知道Plugin可完成包括添加新资源在内的诸多操作，但不清楚如何像Loader那样使用Plugin进行文件转换。感谢您的支持。

附Webpack配置文件：

const path = require('path');
const { CONSTANTS } = require("../helpers");
const isProductionMode = require("../util/isProductionMode");
const TerserPlugin = require("terser-webpack-plugin");
const { getEnabledExtensions } = require('../../../bin/extension');

module.exports.createBaseConfig = function createBaseConfig(
  isServer
) {
  const extenions = getEnabledExtensions()
  const loaders = [
    {
      test: /\.m?js$/,
      exclude: {
        and: [/node_modules/],
        not: [
          /@evershop[\\/]core/,
          // Include all enabled extension; 
          ...extenions.map(ext => {
            const regex = new RegExp(ext.resolve.replace(/\\/g, '[\\\\\\]').replace(/\//g, '[\\\\/]'));
            return regex;
          })
        ]
      },
      use: [
        {
          loader: path.resolve(CONSTANTS.LIBPATH, 'webpack/loaders/LayoutLoader.js'),
        },
        {
          loader: path.resolve(CONSTANTS.LIBPATH, 'webpack/loaders/GraphqlLoader.js'),
        },
        {
          loader: 'babel-loader?cacheDirectory',
          options: {
            sourceType: 'unambiguous',
            cacheDirectory: true,
            presets: [
              [
                "@babel/preset-env",
                {
                  "targets": {
                    "esmodules": true
                  },
                  "exclude": ["@babel/plugin-transform-regenerator", "@babel/plugin-transform-async-to-generator"]
                }
              ],
              '@babel/preset-react'
            ]
          }
        }
      ]
    }
  ];

  const output = isServer ? {
    path: CONSTANTS.BUILDPATH,
    publicPath: CONSTANTS.BUILDPATH,
    filename: isServer === true ? '[name]/server/index.js' : '[name]/client/index.js',
    pathinfo: false
  } : {
    path: CONSTANTS.BUILDPATH,
    publicPath: isProductionMode() ? '/assets/' : '/',
    pathinfo: false
  };

  if (!isProductionMode()) {
    Object.assign(output, {
      chunkFilename: (pathData) => {
        return `${pathData.chunk.renderedHash}/client/${pathData.chunk.runtime}.js`;
      }
    });
  } else {
    Object.assign(output, {
      chunkFilename: (pathData) => {
        return `chunks/${pathData.chunk.renderedHash}.js`;
      }
    });
  }

  if (isServer) {
    output.libraryTarget = 'commonjs2';
    output.globalObject = 'this';
  };

  const config = {
    mode: isProductionMode() ? 'production' : 'development',
    module: {
      rules: loaders
    },
    target: isServer === true ? 'node12.18' : 'web',
    output: output,
    plugins: [],
    cache: { type: 'memory' }
  };

  config.optimization = {};
  if (isProductionMode()) {
    config.optimization = Object.assign(config.optimization, {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            parse: {
              // We want uglify-js to parse ecma 8 code. However, we don't want it
              // to apply any minification steps that turns valid ecma 5 code
              // into invalid ecma 5 code. This is why the 'compress' and 'output'
              // sections only apply transformations that are ecma 5 safe
              // https://github.com/facebook/create-react-app/pull/4234
              ecma: 2020,
            },
            compress: {
              ecma: 5,
              warnings: false,
            },
            mangle: {
              safari10: true,
            },
            output: {
              ecma: 5,
              comments: false,
              // Turned on because emoji and regex is not minified properly using
              // default. See https://github.com/facebook/create-react-app/issues/2488
              ascii_only: true,
            }
          }
        })
      ]
    });
  }

  return config;
}

可以用Plugin实现文件转换，但它和Loader的执行逻辑、适用场景有明显区别，以下是具体实现思路和示例：

核心区别：Loader vs Plugin #

• Loader：针对单个模块文件做转换，属于Webpack解析模块的流水线环节，逐个处理文件，适合单文件级别的编译、转译（比如babel-loader处理JS，css-loader处理CSS）。
• Plugin：监听Webpack编译生命周期的钩子，能拿到全局编译上下文，可操作整个编译流程中的资源、模块，适合跨模块、全局级别的处理，或者在模块解析完成后做统一修改。

用Plugin实现文件转换的步骤 #

1. 编写自定义Plugin #

以Webpack 5为例，推荐使用processAssets钩子（资源处理阶段）来修改文件内容，示例如下：

class CustomFileTransformPlugin {
  apply(compiler) {
    // 绑定到资源预处理阶段，确保在其他插件处理前执行
    compiler.hooks.processAssets.tap(
      {
        name: 'CustomFileTransformPlugin', // 插件名称，用于调试
        stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS
      },
      (assets) => {
        // 遍历所有即将输出的资源
        Object.keys(assets).forEach(assetPath => {
          // 只处理目标文件，比如匹配你的项目中需要特殊处理的JS文件
          if (/\.m?js$/.test(assetPath) && !assetPath.includes('node_modules')) {
            const asset = assets[assetPath];
            // 获取文件原始内容
            const sourceCode = asset.source();
            
            // 这里写你的自定义转换逻辑，比如替换特定代码片段、注入内容等
            const transformedCode = sourceCode.replace(/特定标识/g, '替换后的内容');
            
            // 用Webpack提供的RawSource更新资源内容，保留源映射兼容性
            assets[assetPath] = new compiler.webpack.sources.RawSource(transformedCode);
          }
        });
      }
    );
  }
}

module.exports = CustomFileTransformPlugin;

2. 在你的Webpack配置中引入Plugin #

修改你提供的配置里的plugins数组：

// 引入自定义插件
const CustomFileTransformPlugin = require('./path/to/CustomFileTransformPlugin');

// 在createBaseConfig函数里的config对象中添加插件
const config = {
  // ...其他原有配置
  plugins: [new CustomFileTransformPlugin()],
  // ...
};

适用场景 #

当你遇到以下情况时，适合用Plugin做文件转换：

• 需要修改已打包完成的整体资源，而非单个模块
• 转换逻辑依赖全局编译上下文（比如需要知道所有输出文件的信息）
• 跨多个模块的统一处理（比如给所有JS文件添加版权注释）

如果只是单个模块的转译，优先用Loader，因为它更贴合Webpack的模块处理流程，性能更优。

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