Webpack构建错误:错误:解析错误

Question

在使用webpack构建HTML页面(不涉及SPA框架/libs)时，我得到了以下错误

- htmlparser.js:244 new HTMLParser
  [htmlapp-webpack]/[html-webpack-plugin]/[html-minifier]/src/htmlparser.js:244:13

- htmlminifier.js:980 minify
  [htmlapp-webpack]/[html-webpack-plugin]/[html-minifier]/src/htmlminifier.js:980:3

- htmlminifier.js:1341 Object.exports.minify
  [htmlapp-webpack]/[html-webpack-plugin]/[html-minifier]/src/htmlminifier.js:1341:16

- index.js:441 HtmlWebpackPlugin.postProcessHtml
  [htmlapp-webpack]/[html-webpack-plugin]/index.js:441:34

- index.js:274 Promise.all.then.then
  [htmlapp-webpack]/[html-webpack-plugin]/index.js:274:25

在dev中运行时，一切都很顺利。只有在尝试构建时才会发生这种情况，这是我如何在package.json中配置开发和构建任务的：

"scripts": {
    "build": "webpack -p --progress --mode production --config webpack.config.js",
    "start": "npm run dev"
    "dev": "cross-env NODE_ENV=dev webpack-dev-server --open --config webpack.config.js",
}

当webpack试图捆绑这些图像时，这些错误似乎会发生，因为我在错误消息中看到了很多base64转换。

​

​

下面是我的webpack图像加载程序的配置：

{
    test: /\.(gif|png|jpe?g|svg)$/i,
    use: [
      {
        loader: "url-loader",
        options: {
          limit: 8192,
          name: "[path][name].[ext]?[hash]",
          fallback: "file-loader"
        }
      },
      {
        loader: "image-webpack-loader",
        options: {
          mozjpeg: {
            progressive: true,
            quality: 65
          },
          pngquant: {
            quality: "65-90",
            speed: 4
          },
          gifsicle: {
            interlaced: false
          },
          svgo: {
            plugins: [
              { removeTitle: true },
              { convertColors: { shorthex: false } },
              { convertPathData: false }
            ]
          },
          webp: {
            quality: 75
          }
        }
      }
    ]
  }

希望你们能帮我解决这个问题，在过去的两天里，我一直在寻找解决方案，但仍然没有成功。

更新

这就是HTML代码的编写方式，没有什么特别之处。

<div class="wrapper">
    <div data-aos="fade-up">
        <img src="./public/img/some-shape.svg" class="img" alt="">
    </div>
    ...
</div>

Answer 1

根据我在屏幕截图上看到的，它们不是关于base64数据的引号。

您可以在https://kangax.github.io/html-minifier/在线测试此问题。

<img src="data:image/png;base64, <base64data>" />

被正确地缩小，而：

<img src=data:image/png;base64, <base64data> />

抛出一个Error: Parse Error: <img src=data:image/png;base64, <base64data> />