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

Posted 2023-05-10

参考技术A

在使用webpack的url-loader时候报错了，明明安装了 npm i --save-dev url-loader
但一运行npm run build打包就报错，提示没有找到模块"file-loader"

找到项目底下的webpack.config.js文件，修改对应的url-loader的limit参数。

这个参数十分的致命，一定要和项目的图片大小匹配（大于图片字节）

再次运行npm run build 打包，报错解除。

情况一：加载的图片字节小于limit参数。（第一种解决方案）
情况二：加载图片的字节大于limit参数。（图片是38.2KB字节>我们设置的limit参数8192=8KB，因为换算的关系是1KB=1024B）

详细步骤

安装

再次执行 npm run build 打包
这时候我们会看到我们的dist目录下，多出了一个通过哈希算法自动生成命名的图片。

原来的样子是这样的，所以我们要手动添加路径测试才会看出效果。

再次运行npm run build进行打包。

参数的解释：

总结 ：webpack官网提供的url-loader里面的limit参数，是可以修改的。当我们的项目图片文件太多的时候，我们是不可能去估算整个图片文件夹的大小，然后再去设置limit参数，这有点不切实际的，所以第一种解决方案只适合少量的图片文件的存在。.

如果遇到大型项目，还是要使用第二种方案的，安装file-loader。

Module build failed: ReferenceError: Unknown plugin “component“ specified问题解决

报错信息

Module build failed: ReferenceError: Unknown plugin "component" specified in "

安装了npm install babel-plugin-component -D解决

Module build failed: Error: Couldn't find preset "env" relative to directory

安装npm install babel-preset-env --save 解决

Module build failed: Error: Couldn't find preset "stage-2"

安装babel-preset-stage-2解决