Webpack打包图片出现：ERROR in 路径，Module parse failed：…错误解决办法

–>

webpack打包图片问题

今天在使用webpack打包图片时出现了一个很小的问题，但是麻烦了我好长时间。

我们来看一下这个问题：

这是我运行webpack-dev-server时给我提示的错误：

我们直观的去看这个问题：

• 第一行：错误在路径上。
• 第二行：模块分析失败，出现了意外字符”�”,(1:0)
• 第三行：您可能需要适当的加载程序来处理此文件类型。

下面的就不看了，这三行足够。

这三行说明了一个问题，我们的路径有问题，如果你在对图片命名是以数字来命名，尤其是00，01这一类的数字来命名时就会出问题。

解决方法：换一个中文名字即可。

• 我测试过，webpack就好像抽风了一样，刚开始给我提示这个错误。
• 但是当我改了名字运行成功之后，再次运行就又不出现这个问题了。

接下来是我的猜测：

因为这个错误它不报了，我也无从判断了，所以只能猜测一下，但是我的猜测也不是胡乱的猜测。

1. 我们在不给加载的图片指定limit时，图片基本上都是base64编码在页面里。
2. 问题也就出在这里，base64编码，对数字的转换都是确定的，比如索引”0″代表”A”，索引”1″代表”B”。
3. 这就说明一点，0和1在base64里也是存在的。

但是要知道，base64编码对地址有两种操作：编码和解码。

我接下来说的大家可以去尝试，证实一下：base64编码在线转换工具

测试数据：0，1，2，01，10， 11， 25，666，4561654

编码：

上面的测试数据，无论哪一个，无论是编码是什么，它们都有自己对应的编码。

解码：

上面的测试数据，除了个位数即0—9之间的数解码没有结果之外，其他的都是有结果的。

而且结果中，或多或少都会出现”�”。

学我们这一行的应该都知道，”�”这个符号，一般是出现乱码的时候才会出现的符号。

乱码就不用想了，我们的程序肯定不认识，所以就会导致的错误。

这就是问题的所在了，不过webpack为什么会对这样的路径进行解码，这个我也很懵逼。

如果你知道的话，欢迎评论告诉我。

目前我采取的策略就是：改名字。【简单粗暴】

本文来源 互联网收集，文章内容系作者个人观点，不代表 本站 对观点赞同或支持。如需转载，请注明文章来源,如您发现有涉嫌抄袭侵权的内容，请联系本站核实处理。