webpack:url-loader打包img后src为[object Module]

简介: webpack:url-loader打包img后src为[object Module]

引入图片的方式

<!-- 相对路径引入 -->
<img src="./logo.jpg" alt="">
<!-- 绝对路径引入 -->
<img src="@/assets/logo.jpg" alt="">
<!-- 引入static文件, 不会处理 -->
<img src="/static/logo.jpg" alt="">

webapck 配置文件


{
  test: /\.(jpg|png|gif|jpeg|woff|ttf)$/,
   use: [
     {
       loader: 'url-loader',
       options: {
         esModule: false, // 这里设置为false
         // 如果图片大小小于这个值,就会被打包为base64格式
         limit: 10 * 1000, // 10 kb
         name: 'img/[name].[hash].[ext]',
       },
     },
   ],
 },

遇到的问题

打包产物中出现了[object Module]


<img src="[object Module]" alt="">

原因是新版本的file-loader选项esModule默认为true ,需要将其设置为false

相关文章
|
2月前
|
JavaScript
webpack打包TS
webpack打包TS
131 60
|
28天前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
|
28天前
|
前端开发 JavaScript
ES6模块化和webpack打包
【10月更文挑战第5天】
|
22天前
|
缓存 前端开发 JavaScript
深入了解Webpack:模块打包的革命
【10月更文挑战第11天】深入了解Webpack:模块打包的革命
|
2月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
80 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
20天前
|
缓存 前端开发 JavaScript
Webpack技术深度解析:模块打包与性能优化
【10月更文挑战第13天】Webpack技术深度解析:模块打包与性能优化
|
22天前
|
前端开发 JavaScript 开发者
深入了解Webpack:现代JavaScript应用的打包利器
【10月更文挑战第11天】 深入了解Webpack:现代JavaScript应用的打包利器
|
2月前
|
缓存
webpack 打包多页面应用
webpack 打包多页面应用
22 1
|
2月前
webpack 打包多页面应用
webpack 打包多页面应用
|
2月前
|
JavaScript 前端开发
手写一个简易bundler打包工具带你了解Webpack原理
该文章通过手写一个简易的打包工具bundler,帮助读者理解Webpack的工作原理,包括模块解析、依赖关系构建、转换源代码以及生成最终输出文件的整个流程。