如何编写webpack plugin将require引用替换为对应函数的源代码

这个需求完全可以实现，你想到的用string-replace-loader做字符串替换的方案是可行的，除此之外也可以通过自定义webpack loader实现更灵活的适配。

方案一：使用string-replace-loader（轻量简单，适合固定场景） #

如果你的util.js的导出结构基本不会变化，直接用这个方案成本最低：

1. 安装依赖：

npm install string-replace-loader --save-dev

2. 调整webpack配置，先读取util.js的内容提取对应函数源码，再匹配目标代码段做替换，示例配置如下：

// webpack.config.js
const fs = require('fs');
const utilContent = fs.readFileSync('./util.js', 'utf-8');

// 提取指定函数的函数体，正则可根据你的实际代码格式调整
const getFunctionCode = (funcName, content) => {
  const reg = new RegExp(`export function ${funcName}\\(\\)\\s*{([\\s\\S]*?)}`);
  const matchRes = content.match(reg);
  return matchRes ? matchRes[1].trim() : '';
}

const aCode = getFunctionCode('a', utilContent);
const bCode = getFunctionCode('b', utilContent);
const targetReplaceCode = `
const a = function () {
  ${aCode}
};
const b = function () {
  ${bCode}
};
`

module.exports = {
  // 其他webpack配置保持不变
  module: {
    rules: [
      {
        test: /index\.js$/,
        loader: 'string-replace-loader',
        options: {
          search: /const\s*\{\s*a\s*,\s*b\s*\}\s*=\s*require\('\.\/util'\);/,
          replace: targetReplaceCode
        }
      }
    ]
  }
}

方案二：自定义webpack loader（灵活度高，适配动态场景） #

如果后续util.js会新增导出函数，或者导出格式有调整，推荐自己写个loader处理，不用每次修改匹配规则：

1. 项目根目录新建自定义loader文件inline-util-loader.js：

// inline-util-loader.js
const fs = require('fs');
const path = require('path');

module.exports = function (content) {
  // 不需要处理的文件直接返回原内容
  if (!content.includes("const {a, b} = require('./util');")) return content;

  // 自动定位util.js的绝对路径
  const utilPath = path.resolve(this.context, './util.js');
  const utilContent = fs.readFileSync(utilPath, 'utf-8');

  // 提取函数逻辑可自行扩展，支持更多导出项
  const getFunctionCode = (funcName, content) => {
    const reg = new RegExp(`export function ${funcName}\\(\\)\\s*{([\\s\\S]*?)}`);
    const matchRes = content.match(reg);
    return matchRes ? matchRes[1].trim() : '';
  }

  const aCode = getFunctionCode('a', utilContent);
  const bCode = getFunctionCode('b', utilContent);
  const targetReplaceCode = `
const a = function () {
  ${aCode}
};
const b = function () {
  ${bCode}
};
  `
  return content.replace(/const\s*\{\s*a\s*,\s*b\s*\}\s*=\s*require\('\.\/util'\);/, targetReplaceCode);
}

2. 在webpack配置中引入自定义loader：

// webpack.config.js
const path = require('path');
module.exports = {
  // 其他webpack配置保持不变
  module: {
    rules: [
      {
        test: /index\.js$/,
        loader: path.resolve(__dirname, './inline-util-loader.js')
      }
    ]
  }
}

如果需要处理带参数的函数、导出箭头函数等更复杂的场景，可以引入@babel/parser做AST解析，比正则匹配的准确率更高。

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