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

9/12/2021 WebpackBug

今天在使用 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,
      },
    },
  ],
},
1
2
3
4
5
6
7
8
9
10
11
12

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

最后更新于: 2021年9月15日星期三晚上10点43分
Faster Than Light
Andreas Waldetoft / Mia Stegmar