Html-webpack-plugin: No quotes for base64 images, which causes errors when using minify

Created on 25 Mar 2020 · 4Comments · Source: jantimon/html-webpack-plugin

Current behaviour

I use url-loader and html-loader to process images referenced in html, Packaging error,
Obviously, base64 images are not wrapped in quotes。

ERROR in   Error: html-webpack-plugin could not minify the generated output.
  In production mode the html minifcation is enabled by default.
  If you are not generating a valid html output please disable it manually.
  You can do so by adding the following setting to your HtmlWebpackPlugin config  :
  |
  |    minify: false
  |
  See https://github.com/jantimon/html-webpack-plugin#options for details.
  For parser dedicated bugs please create an issue here:
  https://danielruf.github.io/html-minifier-terser/
  Parse Error: <link rel="shortcut icon" href=data:image/vnd.microsoft.icon;base  64,AAABAAEAICAAAAEAIACoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAABAAAAAAAAAAAAAAAAA  AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALvY+Qa82Pk+u9f4g7vX+K282Pm5vNj5ubzY+bm82Pm5v  Nj5ubzY+bm82Pm5vNj5ubzY+bm82Pm5vNj5ubzY+bm82Pm5vNj5ubvX+K271/iDvNj5PrvY+QYAAAA  AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALzY+QC82PlIu9f5ybzY+fu82Pn/vNj5/7zY+f+82  Pn/vNj5/7zY+f+82Pn/vNj5/7zY+f+82Pn/vNj5/7zY+f+82Pn/vNj5/7zY+f+82Pn/vNj5/7zY+f+  82Pn7u9f5ybzY+US82PkAAAAAAAAAAAAAAAAAAAAAAAAAAAC82PkEvNj5eLzY+fm82Pn/vNj5/7zY+  f+82Pn/vNj5/7zY+f+82Pn/u9f4/7fS9f+fteb/nK7p/5yu6f+juuj/udX3/7zY+f+82Pn/vNj5/7z  Y+f+82Pn/vNj5/7zY+f+82Pn/u9f5+bzY+HS82PkCAAAAAAAAAAAAAAAAvNj5ALzY+Xi82Pn/vNj5/  7zY+f+82Pn/vNj5/7zY+f+82Pn/vNj5/7rW9/+Qod7/dnrj/3h57P94eez/d3jq/3h57P96f+L/nbH  n/7zY+f+82Pn/vNj5/7zY+f+82Pn/vNj5/7zY+f+82Pn/vNj5/bzY+Xa82PkAAAAAAAAAAAC82PlCu  9j59bzY+f+82Pn/vNj5/7zY+f+82Pn/vNj5/7zY+f+61fb/YnaS/xwpSv87Q4D/QEiJ/y45Z/8rNWH  /P0eI/zxEg/8gLU//fJKv/7vX+P+82Pn/vNj5/7zY+f+82Pn/vNj5/7zY+f+82Pn/u9j59bzY+T4AA  AAAu9j4ArvY+MO82Pn/vNj5/7zY+f+82Pn/vNj5/7zY+f+82Pn/vNj5/4+oxv8SIDf/Dx0z/w8dM/+  UmqT/ub3D/7m9w/+TmaP/Dx0z/w8dM/8WJTv/lq/O/7zY+f+82Pn/vNj5/7zY+f+82Pn/vNj5/7zY+  f+82Pn/vNj5wbzY+AK82Pk2vNj5+bzY+f+82Pn/vNj5/7zY+f+82Pn/vNj5/7zY+f+82Pn/Z3yX/w8  dM/8PHTP/Dx0z/9PV2f///////////9PV2f8PHTP/Dx0z/w8dM/9ofZn/vNj5/7zY+f+82Pn/vNj5/  7zY+f+82Pn/vNj5/7zY+f+82Pn5vNj5MrzY+Xa82Pn/vNj5/7zY+f+82Pn/vNj5/7zY+f+82Pn/vNj  5/7zY+f+zzu//kKnH/4+nxv+Pp8b/tMni/77R6f+80Oj/tMni/4+nxv+Pp8b/kKnH/7PO7/+82Pn/v  Nj5/7zY+f+82Pn/vNj5/7zY+f+82Pn/vNj5/7

Environment

Node.js v10.15.3
win32 10.0.17763
npm: 6.4.1
webpack: 4.42.1
html-webpack-plugin： 4.0.1

Config

// in  module.rules
          {
                test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]'),
                    publicPath: 'https://cdn1.xxx.com/static/'
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader',
                options: {
                    attributes: {
                        root: path.resolve(__dirname, '../src'),// html中引用时直接使用"/assets/img/xxx.ico"这样子
                        list: [
                            {
                                tag: 'img',
                                attribute: 'src',
                                type: 'src'
                            },{
                                tag: 'link',
                                attribute: 'href',
                                type: 'src'
                            }
                        ]
                    }
                }
            }
// in module.plugins
   new HtmlWebpackPlugin({
      ...
      minify: {
        removeAttributeQuotes: false
      },
      ...
    }),

Copy your template file if it is part of this issue:

<!DOCTYPE html>
<html>
  <head>
    ...
    <link rel="shortcut icon" href="/assets/img/favicon.ico">
    ...
  </head>
  ...
</html>

Source

chua1989

Most helpful comment

It looks like there are missing quotes after href=:

  <link rel="shortcut icon" href=data:image/vnd.microsoft.icon;base

From your example it looks like that the html-loader is turning

<link rel="shortcut icon" href="...

into

<link rel="shortcut icon" href=da...

In that case you should open a bug report for the html-loader.

jantimon on 25 Mar 2020

👍2

All 4 comments

It looks like there are missing quotes after href=:

  <link rel="shortcut icon" href=data:image/vnd.microsoft.icon;base

From your example it looks like that the html-loader is turning

<link rel="shortcut icon" href="...

into

<link rel="shortcut icon" href=da...

In that case you should open a bug report for the html-loader.

jantimon on 25 Mar 2020

👍2

I'm going to drop this here as well, related to https://github.com/webpack-contrib/html-loader/issues/306#issuecomment-674242172

It appears that the issue here may have been the same as mine, where both html-loader and html-webpack-plugin were both performing minification.

Disabling minification in either of the plugins fixed the issue for me.

      {
        test: /\.html$/i,
        loader: 'html-loader',
        options: {
          minimize: false,
        },
      },

BenjaminWFox on 14 Aug 2020

👍1

Having trouble finding my Config file. Which directory should it be under?

jakobarsement on 18 Jan 2021

It looks like there are missing quotes after href=:
  <link rel="shortcut icon" href=data:image/vnd.microsoft.icon;base  
From your example it looks like that the html-loader is turning
<link rel="shortcut icon" href="...
into
<link rel="shortcut icon" href=da...
In that case you should open a bug report for the html-loader.

I had the same problem and indeed I was missing a double quote in the icon link. I don't know why VS Code did not show me the error before deploying but now it works. Thank you.