webpack打包图片问题
今天在使用webpack打包图片时出现了一个很小的问题,但是麻烦了我好长时间。
我们来看一下这个问题:
这是我运行webpack-dev-server
时给我提示的错误:
我们直观的去看这个问题:
- 第一行:错误在路径上。
- 第二行:模块分析失败,出现了意外字符"�",(1:0)
- 第三行:您可能需要适当的加载程序来处理此文件类型。
下面的就不看了,这三行足够。
这三行说明了一个问题,我们的路径有问题,如果你在对图片命名是以数字来命名,尤其是00,01这一类的数字来命名时就会出问题。
解决方法:换一个中文名字即可。
- 我测试过,webpack就好像抽风了一样,刚开始给我提示这个错误。
- 但是当我改了名字运行成功之后,再次运行就又不出现这个问题了。
接下来是我的猜测:
因为这个错误它不报了,我也无从判断了,所以只能猜测一下,但是我的猜测也不是胡乱的猜测。
- 我们在不给加载的图片指定
limit
时,图片基本上都是base64编码在页面里。 - 问题也就出在这里,base64编码,对数字的转换都是确定的,比如索引"0"代表"A",索引"1"代表"B"。
- 这就说明一点,0和1在base64里也是存在的。
但是要知道,base64编码对地址有两种操作:编码和解码。
我接下来说的大家可以去尝试,证实一下:base64编码在线转换工具
测试数据:0,1,2,01,10, 11, 25,666,4561654
编码:
上面的测试数据,无论哪一个,无论是编码是什么,它们都有自己对应的编码。
解码:
上面的测试数据,除了个位数即0—9之间的数解码没有结果之外,其他的都是有结果的。
而且结果中,或多或少都会出现"�"。
学我们这一行的应该都知道,"�"这个符号,一般是出现乱码的时候才会出现的符号。
乱码就不用想了,我们的程序肯定不认识,所以就会导致的错误。
这就是问题的所在了,不过webpack为什么会对这样的路径进行解码,这个我也很懵逼。
如果你知道的话,欢迎评论告诉我。
目前我采取的策略就是:改名字。【简单粗暴】