webpack打包html里面img后src为“[object Module]”问题


Posted in Javascript onDecember 22, 2019

在html中引入img图片

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document1</title>
</head>
<body>
 <div id="root" >
  <img src="./logo.jpg" alt="">
 </div>
</html>

使用url-loader/file-loader结合html-loader打包

{
  test: /\.(png|jpg|gif|jpeg)$/,
  use: [{
    loader: 'url-loader',
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      limit: 10240
    }
  }]
},
{
  test: /\.(htm|html)$/,
  loader: 'html-loader'
}

发现打包后html里面,img的src为[object Module]

webpack打包html里面img后src为“[object Module]”问题

但是如果使用"file-loader": "^4.2.0"或者"file-loader": "^2.0.0"却可以正常打包

后来发现file-loader在新版本中esModule默认为true,因此手动设置为false

{
  test: /\.(png|jpg|gif|jpeg)$/,
  use: [{
    loader: 'url-loader',
    // loader: 'file-loader',
    options: {
      esModule: false, // 这里设置为false
      name: '[name].[ext]',
      limit: 10240
    }
  }]
}

webpack打包html里面img后src为“[object Module]”问题

这样就可以正常打包了

webpack打包html里面img后src为“[object Module]”问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
javascript与css3动画结合使用小结
Mar 11 Javascript
jQuery ajax应用总结
Jun 02 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
js中less常用的方法小结
Aug 09 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
node.js事件轮询机制原理知识点
Dec 22 #Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 #Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 #Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 #Javascript
javascript中的相等操作符(==与===区别)
Dec 21 #Javascript
JavaScript中的相等操作符使用详解
Dec 21 #Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 #Javascript
You might like
php自动加载的两种实现方法
2010/06/21 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
javascript jQuery插件练习
2008/12/24 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
JavaScript File分段上传
2016/03/10 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
Python中的高级数据结构详解
2015/03/27 Python
Python协程的用法和例子详解
2017/09/09 Python
Python3 replace()函数使用方法
2018/03/19 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
用python发送微信消息
2020/12/21 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
大学生四年生活自我鉴定
2013/11/21 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
党务公开方案
2014/05/06 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
计划生育工作总结2015
2015/04/03 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
Win10 Anaconda安装python-pcl
2022/04/29 Servers