Webpack 插件 url-loader 编译图片出错

今天写完了自制的博客编译插件准备测试的时候，报了个这样的错

Html Webpack Plugin:

  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/ 

先不扯皮，直接告诉你解决方法先，直接修改 url-loader 的配置

        {
            loader: 'url-loader',
            options: {
                // 小于 8k 全部压缩
                limit: 8192,
                name: 'static/pic/[name].[ext]',
                publicPath: './'
            }
        }

增加一行 esModule: false

        {
            loader: 'url-loader',
            options: {
                // 小于 8k 全部压缩
                limit: 8192,.
                // 增加这个
                esModule: false,
                name: 'static/pic/[name].[ext]',
                publicPath: './'
            }
        }

开始的时候并没有报错，换了个图片就报错了。

看到这个提示，我就知道是压缩的时候出了错误

  |
  |    minify: false
  |

查看了一下控制台输出

Parse Error: <img id="icon" src={"default":"./static/pic/fybugicon.jpg"} class="rounded cell"/> 

./static/pic/fybugicon.jpg 变成了 {"default":"./static/pic/fybugicon.jpg"}?
接着换了个小一点的图片试一下

小图片测试

没报错，成功转成了 base64。
那看来是 url-loader 的输出有点问题。
然后一查 github，发现有个配置项没加，就是上面项的那个 esModule: false。

其实就是看到了有个可疑的配置项在源码的默认配置里面就试了试（悄咪咪