img图片在webpack中使用

HTML中使用<img>标签

![](../../image/alarmLevel/cleared_round_5ecc49.png)
复制代码

JS中使用require加载图片模块

const imgUrl  =  require('../../image/theme/light/nav/alarm.svg');
复制代码

注意：路径一定要是相对路径

image-webpack-loader对比较大的图片进行压缩

依赖 url-loader、img-loader安装

cnpm install img-loader --save-dev
cnpm install --save-dev url-loader
复制代码

安装image-webpack-loader

cnpm install image-webpack-loader --save-dev
复制代码

webpack.config.js：

{test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)$/i,use: [{loader: 'url-loader',options: {limit: 10000 , /* 图片大小小于1000字节限制时会自动转成 base64 码引用*/name: '[path][name].[ext]?[hash:6]!./dir/file.png'}},/*对图片进行压缩*/{loader: 'image-webpack-loader',query: {progressive: true,optimizationLevel: 7,interlaced: false,pngquant: {quality: '65-90',speed: 4}}}// {//   loader:'url-loader?limit=5000&name=[path][name].[ext]?[hash:6]!./dir/file.png'// }]
}
复制代码

效果：

小于10kb的图片

大的图片压缩

转载于:https://juejin.im/post/5cad99b5518825215d37b894

img图片在webpack中使用相关推荐

vue文件里在style的样式需要什么loader_Vue学习笔记之Webpack中css、less、图片等文件处理...
一.webpack中使用css文件: loader是webpack中一个非常核心的概念,去转化webpack不能转化或打包的文件. 安装loader: 官网介绍: 安装: cnpm install - ...
static图片编译了 vue_详解vue-cil和webpack中本地静态图片的路径问题解决方案
本文介绍了vue-cil和webpack中本地静态图片的路径问题解决方案,分享给大家,具体如下: 1 本地图片动态绑定img的src属性一般我们在html中或者vue组件文件中引用图片是这样,这是不 ...
webpack把源代码里面的console和debugger全部去掉_在webpack中，module、chunk和bundle到底是什么样的存在？...
What are module, chunk and bundle in webpack?(在webpack中,module.chunk和bundle到底是什么样的存在呢?)相信很多人在使用webpa ...
webpack中hash、chunkHash、contentHash的区别
webpack中hash.chunkHash.contentHash的区别文件目录: index.js依赖common.js和base.less hash Hash:和整个项⽬的构建相关,只要项⽬⽂ ...
vue mianjs 引用css_vue 学习记录八——webpack中常见的配置项
在web开发中,我们得使用到js(es6).css.html等技术,需要对资源文件管理,例如图片,同时还需要对性能.热加载等进行处理:这些功能都是可以在webpack中进行配置管理的,下面具体介绍说明 ...
webpack --- [读书笔记] webpack中常用的一些配置项
1. Webpack 当前Web开发面临的困境文件依赖关系错综复杂静态资源请求效率低模块化支持不友好浏览器对高级JavaScript特性兼容程度低 1.1 webpack概述 webpack是 ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
vue ---- webpack中loader
loader 概述在实际开发中,webpack默认只能打包处理以 .js 后缀名结尾的模块. 其他非 .js 后缀名结尾的模块,需要调用loader加载器才可以正常打包,否则会报错! lodaer ...
Webpack中的sourcemap以及如何在生产和开发环境中合理的设置sourcemap的类型
简要介绍:在webpack的官网,给出了十几种sourcemap,那么每一种sourcemap之间有什么区别,本文在理解sourcemap的基础上,分析在生产和开发环境中,应该采用何种形式的sourc ...

img图片在webpack中使用

image-webpack-loader对比较大的图片进行压缩

小于10kb的图片

大的图片压缩

img图片在webpack中使用相关推荐

最新文章

热门文章