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?

Froe

For debugging I am using iron-node which allows to add debugger statements to node modules – Ronel

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'
  }

Pinnatisect

Nice one - do you think we could improve the html-webpack-plugin somehow to improve the error message? – Ronel

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.

Spotted

This worked in webpack 1.X but i think it is not working with webpack 2 & 3. – Huron

Answer 3

An update to @Jonathon Blok's answer, but for Webpack 4, with some slight modifications:

• had to npm install --save-dev string-replace-loader@2.
• had to use 'raw-loader' and 'string-replace-loader' identifiers because webpack@4 insisted.
• used options: instead of query: as per the string-replace-loader docs.

For Webpack 4

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

As before,

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.

For Webpack 5

Same as above should work for Webpack 5, though I haven't tested it, by omitting the @2 and installing string-loader with npm install --save-dev string-replace-loader. This is because v3 of the string-replace-loader is expected to work with Webpack 5+, as per the string-replace-loader docs.

Woorali