Как заменить подстроку в строке в файле HTML в Webpack 5

[sergeysnz]

Здравствуйте Валентин, Решил попробовать ваш лоадер, но столкнулся с проблемой. Пусть у нас в HTML файле есть строка с псевдонимом <img src="@img/logo.jpg" alt=""> Я хочу псевдоним @img/ заменить на реальный путь, например img/ В конфигурационном файле webpack.config.js прописал следующее:

module: {
        rules: [
            {
                test: /\.html$/i,
                loader: 'string-replace-loader',
                options: {
                    search: /@img\//g,
                    replace: 'img/',
                    strict: true
                }
            },
          ]
   }

после команды npm run build (webpack --node-env=production) в консоли появляется строка

[info] Working on 1 .html files (это после того как я прописал strict: true)
(node:8336) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use "node --trace-deprecation ..." to show where the warning was created)
...
./src/img/logo.jpg 42 bytes (javascript) 154 KiB (asset) [built] [code generated]

Но как видно Webpack выгрузил изображение из html файла.

Если убрать правило string-replace-loader из модулей конфига, то получаю ошибку

ERROR in ./src/index.html 3:33-76
Module not found: Error: Can't resolve './@img/logo.jpg' in 'D:\Web\template\WebpackTemplate\src'
resolve './@img/logo.jpg' in 'D:\Web\template\WebpackTemplate\src'
  using description file: D:\Web\template\WebpackTemplate\package.json (relative path: ./src)
    using description file: D:\Web\template\WebpackTemplate\package.json (relative path: ./src/@img/logo.jpg)
      no extension
        D:\Web\template\WebpackTemplate\src\@img\logo.jpg doesn't exist
      as directory
        D:\Web\template\WebpackTemplate\src\@img\logo.jpg doesn't exist
 @ ./src/index.js 1:0-22

[sergeysnz]

Попробовал чистую сборку. Установил только всё необходимое:

"copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.3",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.5.0",
    "string-replace-loader": "^3.1.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"

Всё описанное выше работает без проблем. Буду искать на каком этапе перестаёт работать.

[sergeysnz]

Нашел я виновника. Это file-include-webpack-plugin. И это

[info] Working on 1 .html files 
(node:8336) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.

тоже его рук дело. Причём после установки последнего, перестаёт работать string-replace-loader

Есть подозрение, что всё ломает js-beautify

[sergeysnz]

Можно как либо повлиять на последовательность выполнения плагинов и модулей? Как заставить модуль string-replace-loader выполняться либо до , либо после определённого модуля/плагина?