如何将Webpack打包产物插入已存在文件的main函数中？

方法：自定义Webpack插件 #

这是最灵活的方案，直接通过插件在打包完成后修改文件内容。

1. 准备基础文件
   假设你的基础文件是base.js，可以在main函数内加一个明确标记方便替换：

function main() {
  // INSERT_BUNDLE_HERE
}

2. 修改Webpack配置
   在webpack.config.js中添加自定义插件，先输出临时bundle，再将其内容插入到base.js的main函数里：

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

module.exports = {
  entry: './src/index.js', // 你的项目入口文件
  output: {
    filename: 'temp-bundle.js', // 临时输出的bundle文件
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    {
      apply(compiler) {
        // 监听打包完成后的钩子
        compiler.hooks.afterEmit.tap('InsertBundleIntoMain', () => {
          // 读取临时bundle内容
          const bundleCode = fs.readFileSync(path.join(__dirname, 'dist/temp-bundle.js'), 'utf8');
          // 读取基础文件内容
          const baseCode = fs.readFileSync(path.join(__dirname, 'base.js'), 'utf8');
          // 替换标记为bundle内容，生成最终文件
          const finalCode = baseCode.replace('// INSERT_BUNDLE_HERE', bundleCode);
          fs.writeFileSync(path.join(__dirname, 'dist/final.js'), finalCode);
          // 可选：删除临时bundle文件
          fs.unlinkSync(path.join(__dirname, 'dist/temp-bundle.js'));
        });
      },
    },
  ],
};

3. 执行打包
   确保已安装Webpack依赖，然后运行打包命令：

npx webpack --mode production

注意事项 #

• 标记法比正则匹配函数体更稳定，能避免因函数格式变化导致的替换失败；如果必须用正则，可调整匹配规则适配你的base.js结构。
• 打包完成后，dist/final.js就是包含bundle内容的最终文件。

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