Question

尝试使用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
          }
        }
      }
    ]
  }

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

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

Webpack生成错误：错误：解析错误

1 个答案: