在Webpack中动态替换img src路径，实现跨模块图片资源复用

看起来你需要的是在Webpack编译阶段，让被调用的基础模块HTML中的资源路径，自动适配调用模块的本地资源——这本质是实现模块级的资源路径注入，我来给你几个可行的方案，顺便帮你排查之前html-replace-webpack-plugin的问题。

方案一：Webpack原生DefinePlugin + HTML插值（最推荐） #

这个方案利用Webpack编译早期的变量替换能力，让基础模块的HTML路径占位符被调用模块的实际路径替换，同时让Webpack能正常识别并打包资源。

步骤1：改造基础模块的HTML模板 #

把模块1的基础HTML里的固定路径改成自定义占位符，比如：

<!-- module_1/src/base.html -->
<img src="%MODULE_ICON_PATH%">

步骤2：在调用模块（模块2）的Webpack配置中注入路径 #

通过DefinePlugin定义占位符的实际值，配合html-loader的插值功能让Webpack识别路径：

// module_2/webpack.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  plugins: [
    // 在编译早期替换占位符为模块2的icon路径
    new webpack.DefinePlugin({
      '%MODULE_ICON_PATH%': JSON.stringify('./img/icon.png')
    }),
    // 引用基础模块的HTML作为模板
    new HtmlWebpackPlugin({
      template: '../module_1/src/base.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              interpolate: true // 开启HTML插值，让Webpack处理替换后的路径
            }
          }
        ]
      },
      // 处理图片资源的loader
      {
        test: /\.(png|svg|jpg)$/i,
        type: 'asset/resource'
      }
    ]
  }
};

原理 #

DefinePlugin会在Webpack编译的最早期把HTML里的%MODULE_ICON_PATH%替换成模块2定义的路径，之后html-loader会识别这个路径并将模块2的icon.png纳入打包流程，完全符合你“编译阶段完成替换”的需求。

方案二：自定义Webpack Loader（更灵活） #

如果需要更复杂的逻辑（比如自动读取调用模块的配置文件），可以写一个简单的自定义Loader来完成路径替换：

步骤1：编写自定义Loader #

在模块2的项目中创建replace-icon-loader.js：

// module_2/replace-icon-loader.js
module.exports = function(source) {
  // 通过loader options传递调用模块的icon路径
  const targetIconPath = this.query.iconPath || './img/icon.png';
  // 替换基础模块中的原始路径
  return source.replace(/@@__dirname\/img\/icon\.png/g, targetIconPath);
};

步骤2：在Webpack配置中使用该Loader #

// module_2/webpack.config.js
module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          'html-loader', // 先让html-loader处理资源路径
          {
            loader: './replace-icon-loader.js',
            options: {
              iconPath: './img/icon.png' // 模块2的icon路径
            }
          }
        ]
      },
      // ...资源loader配置
    ]
  }
};

关于你之前的html-replace-webpack-plugin错误排查 #

你遇到的编译错误大概率是插件执行时机不对：这个插件默认是在HtmlWebpackPlugin生成最终HTML文件后才执行替换，此时Webpack已经完成了资源路径的解析和打包，替换后的路径无法被Webpack识别，导致资源找不到。如果一定要用这个插件，需要调整它的执行顺序，让它在html-loader处理之前运行，但这种方式不如上面的原生方案稳定。

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