今天在使用 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
2
3
4
5
6
7
8
9
10
11
12
再次打包就不会出现 图片混乱的问题了。