Use html-webpack-plugin with string-replace-loader in webpack

Question

I'm trying to replace a variable in index.html that looks like this:

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

In the config file I use:

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

In the loaders array, and then in plugins:

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

But this setting results in:

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.

Do you have any ideas what this can be caused by or how can I debug this?

Answer 1

It's caused because of string-replace-plugin expects a module that exporting a string. You should convert HTML file to CommonJS module.

For example, this is the way by using raw-loader:

first, add quotes to content attribute in html

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

and

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

Answer 2

Konstantin's answer works fine and is good if you want to replace one value. I wanted to replace multiple values so added the following to my loaders array

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

The key change is to first run your html file through the raw loader, and then you can use all the normal config for the string-replace-loader.