构建时的 Webpack 错误：错误：解析错误答案

【问题标题】：Webpack Error on Build: Error: Parse Error构建时的 Webpack 错误：错误：解析错误
【发布时间】：2019-07-14 21:10:15
【问题描述】：

尝试使用 webpack 构建 HTML 页面时出现以下错误（不涉及 SPA 框架/库）

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

【问题讨论】：

标签： html webpack

【解决方案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> />

【讨论】：

谢谢，是的，确实是这个错误，但是我不写base64，“image-webpack-loader”做错了，所以“html-webpack-plugin”在抱怨关于它。问题是如何避免“image-webpack-plugin”正确解析图片并放置正确的base64？
好的，你能用你写的 JS 代码来更新你的问题，以导入和使用 png 图像吗？
完成。这就是我放置每张图片的方式，无论是 svg、png 还是 jpg。没什么特别的，我有一个 img 文件夹，里面有我所有的图像，我只是引用该文件。只有 HTML，所有 JS 的东西都是由 webpack 插件完成的。谢谢。