本文地址:http://www.cnblogs.com/jying/p/8280956.html

开发环境:react、webpack、es5

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

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

  1. <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'.

  1. {
  2. "compilerOptions": {
         **********"types": [
  3. "node"
  4. ]
         **********
  5. }
  6. }

本文地址:http://www.cnblogs.com/jying/p/8280956.html

Module build failed: Error: Cannot find module 'url-loader' 的坑的更多相关文章

  1. Module build failed: Error: Cannot find module 'node-sass'

    安装npm 遇到 Module build failed: Error: Cannot find module 'node-sass' 这次通过重装 npm 完成 先卸载npm npm uninsta ...

  2. vue项目报错,解决Module build failed: Error: Cannot find module 'node-sass' 问题

    1.报错问题 1 E:\WebStormFile\treehole-manage>npm run dev > xc-ui-pc-sysmanage@1.0.0 dev E:\WebStor ...

  3. Module build failed: Error: Cannot find module 'babel-runtime/core-js/get-it

    npm i babel-loader@7.1.5 -D

  4. vue项目npm run dev 报错error in ./src/main.js Module build failed: Error: Cannot find module 'babel-plugin-syntax-jsx'

    问题: vue 项目npm run dev运行时报错,如下图:  原因: 缺少相应的组件 解决办法: 安装相应组件: npm install babel-plugin-syntax-jsx --sav ...

  5. vue-cli 报Module build failed: Error: No parser and no file path given, couldn't infer a parser.错的解决方法

    出错提示如下: ERROR Failed to compile with errors :: error in ./src/App.vue Module build failed: Error: No ...

  6. vue.js报错:Module build failed: Error: No parser and no file path given, couldn't infer a parser.

    ERROR Failed to compile with 2 errors 12:00:33 error in ./src/App.vue Module build failed: Error: No ...

  7. 配置web pack loader 报错:Module build failed: Error: The node API for `babel` has been moved to `babel-core`.

    报错如下 Module build failed: Error: The node API for `babel` has been moved to `babel-core`. 在我配置loader ...

  8. Vue, element-ui Module build failed: Error: No PostCSS Config found

    使用vue框架写pc页面时,我们经常会用到element-ui这个框架. 当我们吧把需要的东西都装在好运行项目的时候,有时会出现这样的错误, Module build failed: Error: N ...

  9. MODULE BUILD FAILED: ERROR: COULDN’T FIND PRESET “ES2015” RELATIVE TO DIRECTORY

    npm run dev 遇到报错: Module build failed: Error: Couldn't find preset "es2015" relative to di ...

随机推荐

  1. linux 安装scala

    1. 下载scala 到scala官网下载scala https://www.scala-lang.org/download/,目前最新版本是2.12.8 wget https://downloads ...

  2. 电商系统架构总结1(EF)

    最近主导了一个电商系统的设计开发过程,包括前期分析设计,框架搭建,功能模块的具体开发(主要负责在线支付部分),成功上线后的部署维护,运维策略等等全过程. 虽然这个系统不是什么超大型的电商系统 数亿计的 ...

  3. Centos7使用pxe安装KVM虚拟机

    Centos7使用pxe安装KVM虚拟机 一.安装服务所需的软件 [root@localhost ~]yum install nginx dhcp vsftpd syslinux -y [root@l ...

  4. 微信小程序连接本地接口(转)

    原文地址 最近的一个项目就是微信小程序 第一次接触微信开发者工具,并进行小程序的后端开发, 于是想看一下小程序如何请求本地的后台服务接口 wx.request({ url: 'http://local ...

  5. iOS跳转洁面时隐藏tabBar的方法

    //1.设置self.tabBarController.tabBar.hidden=YES;       self.tabBarController.tabBar.hidden=YES;   //2. ...

  6. mysql安装卸载-windows

     安装:(注意点) 官网download安装包 choose setup type --> custom 安装路径 detailed configuration developer machin ...

  7. 浮动ip原理及简单实现

    原理:https://blog.csdn.net/readiay/article/details/53538085 简单实现:https://www.cnblogs.com/victorwu/p/70 ...

  8. Python基础2 列表 字典 集合

    本节内容 列表.元组操作 字符串操作 字典操作 集合操作 文件操作 字符编码与转码 1. 列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 ...

  9. idea 安装三方插件的方法

    <一>在线安装 1,File -> Setting -> Plugins, 大红框内是已经安装的插件,可以搜索 2, 点击上图小红框内的按钮, 如下,搜索自己想要的插件,选中, ...

  10. feedparser的安装

    Python中常常要利用RSS下载文本.由于这个Python开源软件嘛,碎片化特别严重.反正是各种边边角角的小问题.网上找来找去找半天都没解决如何安装.我的是win7的.python 是3.4版本的. ...