webpack打包生成多余图片的解决方案、export default _webpackpublicpath_

今天在使用 webpack 打包的时候，发现一个很玄学的问题，那就是我文件中只引入了一张图片，但是打包的时候却出现了两张，而且有一张不能显示，打开不显示的图片二进制后内容是：export default __webpack_public_path__ ...(图片名称)

并且当我不使用url-loader或者file-loader的时候文件中引入图片也能打包成功！(非 webpack5)

百思不得其解啊

后边猜想可能是某个loader更新过后推出的打包图片新功能。

于是慢慢排除，总算是找到了，这里分享出来，给大家 避坑坑。

这个罪魁祸首就是css-laoder,我们来看一下 github它的更新。

github：css-loader (opens new window)

可以看到这里它默认是开启的。

那么我们就需要给他关闭掉：

{
  test: /\.css$/,
  use: [
    "style-loader",
    {
      loader: "css-loader",
      options: {
        url: false,
      },
    },
  ],
},

再次打包就不会出现 图片混乱的问题了。