在 npm webpack 中动态重命名 img "src"

Rename img "src" dynamically in npm webpack

我正在尝试创建一个将被其他模块使用的模块。但是,此模块包含 html 个文件。

模块 1 位置 c:/module_1 - 基地 HTML <img src="@@__dirname/img/icon.png">

在模块 1 中,他使用了他的 icon.png。

在模块 2 中,我希望它使用模块 2

的 icon.png

我试过这个:

plugins: [
    new HtmlReplaceWebpackPlugin([
                {
                    pattern: '@@__dirname',
                    replacement: __dirname
                },
...

html-replace-webpack-plugin

但是出现编译错误:

ERROR in   Error: Child compilation failed:
  Module not found: Error: Can't resolve './@@_dirname/img/icon.png'

我注意到编译后可以替换src

<img src="img/icon.png">

new HtmlReplaceWebpackPlugin([
    {
        pattern: /src=\"([^\"]*)\"/g,
        replacement: function (match, ) 
        {
            return 'src="' + __dirname + '/src/img/' +  + '"';
        }
    }
]),

但我想替换之前,编译它时它会使用它正在重用的模块的图标。

是否可以在 npm 中动态修改 img src,即使它是一个将用作依赖项的模块?

ps。我对网络知之甚少,也不知道我是否正在尝试正确地做这个项目。只是想过以这种方式重用 html 代码。如果我做了一些荒谬的事情,请告诉我。

我用React and this tutorial Setting Up a React.js Environment Using Npm, Babel 6 and Webpack

解决了这个问题