Module build failed: Error: Cannot find module 'file-loader'

在使用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 [email protected](版本号) --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。