Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
sergeysnz opened this issue Feb 27, 2023 · 3 comments

Comments

@sergeysnz
Copy link

sergeysnz commented Feb 27, 2023

Здравствуйте Валентин,
Решил попробовать ваш лоадер, но столкнулся с проблемой.
Пусть у нас в 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 link
Author

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

"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
Copy link
Author

sergeysnz commented Feb 28, 2023

Нашел я виновника.
Это 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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant