Module build failed: Error: Cannot find module 'url-loader' 的坑

2023-01-08 11:47:09

开发环境：react、webpack、es5

引用图片报错：Module build failed: Error: Cannot find module 'url-loader'

react 中对于相对路径图片的引用，使用require

<img src={require("./../../source/dogyear.jpg")} style={{ width: 260 }} />

webpack.config中配置为

{

　　test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,

　　loader: 'url-loader?limit=50000&name=[path][name].[ext]'

}

此时报错：Module build failed: Error: Cannot find module 'url-loader'

记得之前解决过这个问题，npm i url-loader --save-dev 后并不起作用

继续报错：Module build failed: Error: Cannot find module 'file-loader'

因为之前查资料说url-loader 中已经包含 file-loader 了，而且之前同事也试着安装了'file-loader' 说不行，于是我就没继续安装下去。。。

周末在家搞了半天，可查到的相关错误的资料简直太少了！！墙外也么有！！！最后找到了一篇这个 https://segmentfault.com/q/1010000009908226

意思是说limit=50000，限制图片大小为50k左右（甚至更小的50k/1024），将limit改大点就好了，一试果然好了！！！

然后又尝试安装了url-loader的基础上安装file-loader，即使在limit=50k的时候也运行成功了！！！

webpack或是typescript这错误提示简直了，害人不浅，，，，同事也诚欺我。。。

处理总结：

1、安装模块url-loader 和 file-loader

2、安装模块url-loader 并调大对文件大小的限制（或去掉大小限制）

使用ts开发的tsconfig.json配置为es5及其以上的可能还要配置 "types":["node"]，否则会报错：TS2304: Cannot find name 'require'.

{

    "compilerOptions": {
　　　　　**********"types": [

            "node"

        ]
　　　　  **********

    }

}

码农公寓