Webpack3的使用(五)
来源:互联网 发布:反美颜软件有可能 编辑:程序博客网 时间:2024/05/29 12:35
Webpack3的使用(五)
这篇笔记记录一下用webpack处理简单的图片文件
步骤如下:
1、css中指定相对路径的图片
创建存放图片的文件,
引入图片
页面效果:
2、压缩图片
npm install image-webpack-loader --save-dev
{
test:/\.(png|jpg|gif|svg)$/i,
use: [
{loader:'file-loader'},
{loader:'image-webpack-loader'}
]
}
重新打包以后图片占用的内存明显小了许多!
3、打包图片在独立的文件下
下载npm install url-loader --save-dev
{ test: /\.(png|jpg|gif|svg)$/, use: [ { loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]' }, {loader: 'image-webpack-loader'} ]}
打包以后
截止目前五篇笔记也仅仅是最基础最简单的webpack打包应用,其实如果向了解的更多,更加深入的学习并且在真实项目中灵活运用的话,离不开官方文档,在这里强烈建议在由各方需求的话多对照看一看官方文档!推荐文档如下链接:
npm官方文档 webpack3中文文档 webpack中文文档
http://webpack.github.io/
https://webpack.js.org/
下一篇笔记记录一下webpack打包时经常出现的错误!!!
阅读全文
0 0
- Webpack3的使用(五)
- Webpack3的使用(一)
- Webpack3的使用(二)
- Webpack3的使用(三)
- Webpack3的使用(四)
- webpack3.0----postcss-loader的使用
- webpack3.6.0使用笔记
- web项目的构建流程及webpack3.10.0的使用
- webpack3.0问题系列 ——postcss-loader的使用
- 教你怎么使用 webpack3 的 HMR 模块热加载
- webpack3的常用配置
- 深入浅出的webpack3入门教程
- webpack3
- webpack3.6.0使用笔记-附件
- webpack3最新版本配置研究(五) devtool,webpack-dev-server,CommonsChunkPlugin
- Webpack3.x Hot Module Replacement的使用 && switch to prot env to use ExtractTextPlugin
- 搭建React开发环境(使用babel,webpack3)
- 手把手教你webpack3(1)最简单的webpack实例
- Character.UnicodeBlock中cjk的说明
- Scrapyd 使用
- 深入理解 Java 垃圾回收机制
- [BZOJ4503]两个串(快速傅立叶变换FFT)
- Python SMTP服务发送邮件
- Webpack3的使用(五)
- mysql数据库授权操作
- 篇外篇【今天参加了一个区块链项目的私募,说说内心的感觉】
- bing搜索
- 简单了解阿里云批量计算(上篇)
- 2017-12-19作业 if和switch的使用
- jQuery.ajax() 函数详解,很全很好
- Java并发编程实战-章二~volatile的思考
- SpannableString 富文本编辑