在使用webpack的url-loader时候报错了，明明安装了 npm i --save-dev url-loader
但一运行npm run build打包就报错，提示没有找到模块"file-loader"
解决方案一：
找到项目底下的webpack.config.js文件，修改对应的url-loader的limit参数。
这个参数十分的致命，一定要和项目的图片大小匹配（大于图片字节）
我们看到我们的图片已经是38.2KB了，所以limit的参数要比它大，我这里设置50KB足够了。
再次运行npm run build 打包，报错解除。
解决方案2（其实这'file-loader'报错都是limit参数限制大小衍生出来的）
情况一：加载的图片字节小于limit参数。（第一种解决方案）
情况二：加载图片的字节大于limit参数。（图片是38.2KB字节>我们设置的limit参数8192=8KB，因为换算的关系是1KB=1024B）
详细步骤
安装
npm i --save-dev file-loader
报错的话要指定版本号：
npm i file-loader@3.0.1(版本号) --save-dev
语法糖解释：--save-dev 和 file-loader的位置是可以互换的。
再次执行 npm run build 打包
这时候我们会看到我们的dist目录下，多出了一个通过哈希算法自动生成命名的图片。
原来的样子是这样的，所以我们要手动添加路径测试才会看出效果。
所以下面我们就要配置./dist/的路径。
直接在这里添加路径是不允许的（这是种笨方法）。
我们要做的就是打开webpack.config.js文件，在这里面进行配置pubilcPath拼接路径。
再次运行npm run build进行打包。
但根据哈希值随即生成的图片，不易于我们查询读懂的和维护的
所以我们要在webpack.config.js文件中配置url-loader的name属性：
再次执行npm run build打包，我们发现dist目录下面多出了img目录和我们自己命名的图片。
参数的解释：
总结：webpack官网提供的url-loader里面的limit参数，是可以修改的。当我们的项目图片文件太多的时候，我们是不可能去估算整个图片文件夹的大小，然后再去设置limit参数，这有点不切实际的，所以第一种解决方案只适合少量的图片文件的存在。.
如果遇到大型项目，还是要使用第二种方案的，安装file-loader。
网友评论