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

Я использую 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<%= ... %> выражение. Как я могу заставить их обоих работать?

Источник

1 ответ

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

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

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html.ejs',  // don't forget to rename the actual file
    inject: 'body',
    sdk: '/mylib.js'
  })
Источник

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

Источник

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

Во-первых, вам нужен HtmlWebpackPlugin. как указано /questions/4747346/html-loader-perezapisyivaet-vyirazhenie-htmlwebpackplugin/49378708#49378708

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

module.exports=.....

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

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

test: /\.(html)$/, use:  [ 'extract-loader',  { loader: 'html-loader' } ]
Источник
Другие вопросы по тегам