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

优雅哥cc

于 2021-09-11 18:23:14 发布

阅读量1.3k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： BUG合集文章标签： webpack css-loader url-loader file-loader 打包

5 篇文章

订阅专栏

在使用webpack打包时遇到图片重复且无法显示的问题，原因在于css-loader默认设置。解决方案是关闭css-loader的url处理选项，通过修改配置将`url:false`，避免了图片混乱的情况。此问题可能因css-loader更新引起，关闭相应选项后，打包正常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

百思不得其解啊

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

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

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

github：css-loader
在这里插入图片描述
可以看到这里它默认是开启的。

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

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

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