Динамическое переименование img "src" в веб-пакете npm

Question

Я пытаюсь создать модуль, который будет использоваться другими модулями. Тем не менее, этот модуль содержит HTML-файлы.

Расположение модуля 1 c: / module_1 - базовый HTML <img src="@@__dirname/img/icon.png">

В модуле 1 он использует свой icon.png.

В модуле 2 я хотел бы использовать icon.png из модуля 2

Я попробовал это:

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

HTML-заменить-WebPack-плагин

Но происходит ошибка компиляции:

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 + '"';
        }
    }
]),

Но я хотел бы заменить раньше, и что при компиляции он берет значок модуля, в котором он используется повторно.

Можно ли динамически изменять img src в npm, даже если это модуль, который будет использоваться в качестве зависимости?

пс. Я не очень разбираюсь в Интернете и не знаю, правильно ли я делаю проект. Просто подумал о повторном использовании HTML-кода таким образом. Если я делаю что-то нелепое, пожалуйста, дайте мне знать.

Answer 1

Я решаю проблему с помощью React и этого руководства. Настройка среды React.js с использованием Npm, Babel 6 и Webpack.