如何在Webpack插件中插入并复用函数？资源路径替换场景

嘿，刚好我对Webpack插件这块熟得很，来帮你解决在插件里插入复用函数的问题，结合你替换第三方库资源路径的场景，一步步来：

你的需求本质是把通用的资源路径处理逻辑封装成函数，注入到bundle中，让第三方库或业务代码能调用它，下面是具体实现步骤：

1. 编写自定义插件，注入复用函数 #

我们可以利用Webpack的compilation钩子，在资源打包的合适阶段，把你的myFunction插入到目标JS bundle里。这里用Webpack 5+推荐的processAssets钩子，灵活性更高：

创建一个InjectFunctionPlugin.js文件：

const fs = require('fs');
const path = require('path');

class InjectFunctionPlugin {
  apply(compiler) {
    // 绑定compilation钩子，进入资源处理阶段
    compiler.hooks.compilation.tap('InjectFunctionPlugin', (compilation) => {
      // 在资源添加阶段插入我们的函数
      compilation.hooks.processAssets.tap(
        {
          name: 'InjectFunctionPlugin',
          stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
        },
        (assets) => {
          // 读取外部维护的复用函数（也可以直接写在插件里）
          const functionContent = fs.readFileSync(
            path.resolve(__dirname, './src/utils/myResourceHandler.js'),
            'utf8'
          );
          const injectedFunction = `\n${functionContent}\n`;

          // 遍历所有生成的JS资源
          Object.entries(assets).forEach(([filename, source]) => {
            if (filename.endsWith('.js')) {
              // 将函数插入到bundle的最开头
              const updatedSource = injectedFunction + source.source();
              // 更新bundle资源
              compilation.updateAsset(filename, new compiler.webpack.sources.RawSource(updatedSource));
            }
          });
        }
      );
    });
  }
}

module.exports = InjectFunctionPlugin;

对应的src/utils/myResourceHandler.js内容（结合你的afm/trie处理需求）：

// 统一处理资源路径的复用函数
function myFunction(resourceName) {
  // 根据文件类型返回file-loader处理后的资源路径
  const resourcePath = './assets/fonts/' + resourceName;
  try {
    // 对应file-loader的输出，返回正确的资源URL
    return require(resourcePath).default;
  } catch (e) {
    console.warn('资源加载失败:', resourceName);
    return resourceName;
  }
}

2. 在Webpack配置中注册插件 #

把刚才写的插件加到你的webpack.config.js里，同时确保file-loader的配置正确：

const InjectFunctionPlugin = require('./InjectFunctionPlugin');
const webpack = require('webpack');

module.exports = {
  // 其他基础配置（入口、输出等）...
  plugins: [
    new InjectFunctionPlugin(),
    // 可选：如果需要让函数全局可直接访问，添加ProvidePlugin
    // new webpack.ProvidePlugin({
    //   myFunction: 'myFunction'
    // })
  ],
  module: {
    rules: [
      {
        // 处理afm和trie文件
        test: /\.(afm|trie)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'assets/fonts/', // 和函数里的路径对应
              publicPath: './assets/fonts/',
            },
          },
        ],
      },
    ],
  },
};

3. 让第三方库自动调用这个函数 #

你的场景是替换第三方库的资源路径，所以需要自动修改第三方库的代码引用，让它调用我们的函数。可以在刚才的插件里加一段逻辑：

在processAssets的循环中，添加针对库A和库B的处理：

// 针对库A的chunk（假设文件名包含libraryA）
if (filename.includes('libraryA')) {
  const originalCode = source.source();
  // 替换库A中所有类似file1.afm的路径为调用myFunction
  const modifiedCode = originalCode.replace(/file\d+\.afm/g, (match) => `myFunction('${match}')`);
  // 插入函数+修改后的代码
  compilation.updateAsset(filename, new compiler.webpack.sources.RawSource(injectedFunction + modifiedCode));
}

// 针对库B的chunk
if (filename.includes('libraryB')) {
  const originalCode = source.source();
  const modifiedCode = originalCode.replace(/file\d+\.trie/g, (match) => `myFunction('${match}')`);
  compilation.updateAsset(filename, new compiler.webpack.sources.RawSource(injectedFunction + modifiedCode));
}

这样打包后，库A和库B里原来直接引用资源路径的地方，都会自动调用myFunction，从而拿到file-loader处理后的正确路径。

4. 业务代码中调用复用函数 #

如果是你自己的业务代码需要用到这个函数，直接在代码里写：

// 业务代码中调用
const afmResource = myFunction('file1.afm');
const trieResource = myFunction('file1.trie');

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