`html-loader` overwrite `HtmlWebpackPlugin` `<%= %>` expression

Question

I am using HtmlWebpackPlugin in webpack and below is its configuration:

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

In my html I define the script tag as:

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

webpack will replace the <%= htmlWebpackPlugin.options.sdk %> with /mylib.js. However it doesn't work once I add the html-loader plugin as below:

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

The reason I use html-loader is to parse the img src tag on html file. But it conflicts with HtmlWebpackPlugin <%= ... %> expression. How can I make both of them work?

score 1 · Answer 1 · answered May 22 '19 at 20:17

1

The easiest solution i found for this is to rename your template with .ejs extention. This will kick in html-webpack-plugin (as it's an fallback ejs-loader), and then after it process all the <%= %> it will kick in the html-loader.

This way the html-webpack-plugin will running first and then followed by html loader.

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

answered May 22 '19 at 20:17

Aggie

129
4

With this method, html-loader will not insert image names/links anymore. – Mecanik Dec 27 '21 at 16:03
@Mecanik we could still import images, using ejs syntax, example: – Aggie Mar 01 '22 at 16:04

JohMun · Answer 2 · 2019-02-04T00:26:16.850

0

I would give the property ignoreCustomFragments of html-loader a try. According to the docs, you can pass it as an option and the loader ignores some parts, depending on a RegExp: ignoreCustomFragments: [/<%=.*%>/]

edited Feb 04 '19 at 00:26

answered Feb 03 '19 at 23:32

JohMun

426
2
7

Webpack 5: ValidationError: Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'ignoreCustomFragments'. These properties are valid: object { preprocessor?, sources?, minimize?, esModule? } – Mecanik Dec 27 '21 at 08:04

score 0 · Answer 3 · answered May 26 '19 at 11:15

You need to combine three steps.

First, you need HtmlWebpackPlugin. as indicated by https://stackoverflow.com/a/56264384/9363857

Second, you activate html-loader. This leads to the strange result of having a line like

module.exports=.....

in the middle of your html (replacing the require), which is not really what you want.

So, third, you need to translate this back to html, for which you need to add an extract-loader. As in:

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

`html-loader` overwrite `HtmlWebpackPlugin` `<%= %>` expression

3 Answers3