Rename img "src" dynamically in npm webpack

Question

I am trying to create a module that will be used by other modules. However, this module contains html files.

Module 1 location c:/module_1 - Base HTML <img src="@@__dirname/img/icon.png">

In module 1 he uses his icon.png.

In module 2, I would like it to use the icon.png of Module 2

I tried this:

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

html-replace-webpack-plugin

But compilation error occurs:

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

I noticed that it is possible to replace src after compiling

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

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

But I would like to replace before, and that when compiling it it takes the icon of the module in which it is being reused.

Is it possible to modify the img src dynamically in npm, even though it is a module that will be used as a dependency?

ps. I do not know much about the web and I do not know if I'm trying to do the project correctly. Just thought about reusing html code this way. If I'm doing something absurd, please let me know.

Answer 1

I solve the problem using React and this tutorial Setting Up a React.js Environment Using Npm, Babel 6 and Webpack