在npm网页中动态重命名img“src”

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

模块1位置c:/Module\u 1 -基本HTML <img src="@@__dirname/img/icon.png">

在模块1中,他使用图标。png。

在模块2中,我希望它使用图标。模块2 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, $1) 
        {
            return 'src="' + __dirname + '/src/img/' + $1 + '"';
        }
    }
]),

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

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

另外,我对网络了解不多,也不知道我是否在努力正确地完成这个项目。只是考虑过以这种方式重用html代码。如果我在做一些荒谬的事,请告诉我。