Используйте html-webpack-plugin с загрузчиком строк в веб-пакете

Question

Я пытаюсь заменить переменную в index.html, которая выглядит следующим образом:

<meta name='author' content=$variable>

В конфигурационном файле я использую:

  {
    test: /index\.html$/,
    loader: 'string-replace',
    query: {
      search: '$variable',
      replace: 'stuff to inject',
    },
  }

в loaders массив, а затем в plugins:

new HtmlWebpackPlugin({
  template: conf.path.src('src/index.html'),
  inject: true,
})

Но эта настройка приводит к:

ERROR in ./~/html-webpack-plugin/lib/loader.js!./src/index.html Module parse failed (...) Unexpected token (1:0) You may need an appropriate loader to handle this file type.

У вас есть идеи, чем это может быть вызвано или как я могу это отладить?

Answer 1

Это вызвано из-за string-replace-plugin ожидает модуль, который экспортирует строку. Вы должны конвертировать HTML-файл в модуль CommonJS.

Например, это способ с помощью raw-loader:

во-первых, добавьте цитаты к атрибуту содержимого в html

<meta name='author' content='$variable'>`

а также

{
    test: /index\.html$/,
    loader: 'string-replace?search=$variable&replace=stuff to inject!raw'
  }

Answer 2

Ответ Константина отлично работает и хорош, если вы хотите заменить одно значение. Я хотел заменить несколько значений, поэтому добавил следующее loaders массив

  {
    test: /\.html$/,
    loader: 'raw'
  },
  {
    test: /\.html$/,
    loader: 'string-replace',
    query: {
      multiple: [
        {search: '$variable1', replace: 'replacement 1'},
        {search: '$variable2', replace: 'replacement 2'}
      ]
    }
  }

Главное изменение - сначала запустить html-файл через raw загрузчик, а затем вы можете использовать все обычные конфигурации для string-replace-loader,

Answer 3

Обновление user785048 , но для Webpack 4 с некоторыми небольшими изменениями:

• должен был npm install --save-dev string-replace-loader@2.
• пришлось использовать 'raw-loader'а также 'string-replace-loader'идентификаторы, потому что [email protected] настаивал.
• использовал options:вместо query:в соответствии с string-replace-loaderдокументы

Для веб-пакета 4

      {
  test: /.*\.html$/,
  loader: 'raw-loader',
},
{
  test: /.*\.html$/,
  loader: 'string-replace-loader',
  options: {
    multiple: [
      {search: '$variable1', replace: 'replacement 1'},
      {search: '$variable2', replace: 'replacement 2'}            ]
  }
}

Как прежде,

Ключевое изменение заключается в том, чтобы сначала запустить ваш html-файл через необработанный загрузчик, а затем вы можете использовать всю обычную конфигурацию для загрузчика строки-замены.

Для веб-пакета 5

То же, что и выше, должно работать для Webpack 5, хотя я не проверял его, опуская @2и установка строкового загрузчика с npm install --save-dev string-replace-loader. Это связано с тем, что версия 3 загрузчика string-replace-loader, как ожидается, будет работать с Webpack 5+, согласно документам string-replace-loader .