`html-loader` перезаписывает выражение` HtmlWebpackPlugin` `<% =%>`

Question

Я использую HtmlWebpackPlugin в веб-пакете и ниже его конфигурация:

new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        inject: 'body',
        sdk: '/mylib.js'
      })

В моем html я определяю тег script как:

<script src="<%= htmlWebpackPlugin.options.sdk %>"></script>

веб-пакетзаменит <%= htmlWebpackPlugin.options.sdk %> на /mylib.js.Однако он не работает, когда я добавляю плагин html-loader, как показано ниже:

{
          test: /\.html$/,
          use: [
            {
              loader: 'html-loader',
              options: {
                attrs: 'img:src'
              }
            }
          ]
        }

Причина, по которой я использую html-loader, заключается в том, чтобы проанализировать тег img src в html-файле.Но это противоречит выражению HtmlWebpackPlugin <%= ... %>.Как я могу заставить их обоих работать?

Answer 1

Самое простое решение, которое я нашел для этого, - переименовать ваш шаблон с расширением .ejs.Это запустит html-webpack-plugin (так как это запасной ejs-загрузчик), а затем после того, как обработает все <% =%>, он запустит html-загрузчик.

Таким образом, htmlСначала будет запущен -webpack-plugin, а затем загрузчик html.

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html.ejs',  // don't forget to rename the actual file
    inject: 'body',
    sdk: '/mylib.js'
  })

Answer 2

Вам нужно объединить три шага.

Первый , вам нужен HtmlWebpackPlugin.как указано https://stackoverflow.com/a/56264384/9363857

Второй , вы активируете загрузчик html.Это приводит к странному результату наличия строки типа

module.exports=.....

в середине вашего html (заменяющего require), что не совсем то, что вы хотите.

Итак, третий , вам нужно перевести это обратно в html, для чего вам нужно добавить экстракт-загрузчик.Как в:

test: /\.(html)$/, use:  [ 'extract-loader',  { loader: 'html-loader' } ] 

Answer 3

Я бы попробовал свойство ignoreCustomFragments html-загрузчика.Согласно документам , вы можете передать его как опцию, и загрузчик игнорирует некоторые части, в зависимости от RegExp: ignoreCustomFragments: [/<%=.*%>/]