傻瓜式学习webpack(四)——图片处理
来源:互联网 发布:java poi导出word文档 编辑:程序博客网 时间:2024/06/11 02:23
有了前面三章的基础,利用webpack处理图片也是同理的。
一、首先你需要安装 file-loader和url-loader;
二、在你的webpack.config.js中的代码添加处理图片相关的loader,添加后如下:
module.exports = { //entry 入口文件 让webpack用哪个文件作为项目的入口 entry: { index: './view/index.js', }, //output 出口 让webpack把处理完成的文件放在哪里 output: { path: __dirname+'/dist', filename: '[name].js' }, //时刻监听文件的更新 watch: true, watchOptions: { ignored: /node_modules/ }, //module 模块 要用什么不同的模块来处理各种类型的文件 module: { loaders: [ { test: /\.jsx?$/, loader: 'babel-loader',//采用babel模块 exclude: /node_modules/,//忽略mode_modules的代码 query: { presets: ['es2015','react']//解析es6和react语言 } },{ test: /\.css?$/, loaders: ['style-loader','css-loader'], },{ test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192&name=./image/[name].[ext]?[hash]' } ] }, resolve: { extensions: ['.coffee','.js'] }, };
这里我们看到test里面自动匹配了png、jpg和gif格式的图片。如果还需要更多格式的图片,只需在后面直接添加即可,用竖线分隔开。
loader后面的参数:
[name]表示图片文件的文件名;
[ext]表示图片文件的扩展名;
[hash]表示图片文件的哈希值
处理之前:
background: url('../image/pro-2.png') center no-repeat;处理之后:
background:url(./image/pro-2.png?261540484ffc04fa3fb5a31fd802f126) center no-repeat;
limit = 后面跟的是数字,加上这个参数,图片文件大小(单位为byte)小于该参数值的文件会被转换为base64编码的形式;
name
是表示文件被处理之后再bulid目录中的路径和图片生成规则;
所以,一旦图片文件小于所设定的参数,处理之后就变成下面这样,减轻很多的网络请求:
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4gAAAWhCAYAAADXw74KAAAAGXRFW…bTWsnwthzaThgVEKOJ1icWERy6pfwigmRef8jq1P8LMACIh/ZmigKAWgAAAABJRU5ErkJggg==) center no-rep
阅读全文
0 0
- 傻瓜式学习webpack(四)——图片处理
- 傻瓜式学习webpack(二)——配置webpack
- 傻瓜式学习webpack(一)——建立项目
- 傻瓜式学习webpack(六)——一个项目多个webpack
- 傻瓜式学习webpack(三)——添加css样式
- 傻瓜式学习webpack(五)——css的抽离和html的自动引入js/css
- Webpack傻瓜式指南(未完待续)
- Webpack傻瓜式指南(一)
- Webpack傻瓜式指南(一)
- Webpack傻瓜式指南
- Webpack傻瓜式指南
- webpack入门(四)——webpack loader 和plugin
- webpack入门(四)——webpack loader 和plugin
- webpack之傻瓜式教程
- webpack入门(五)——webpack 故障处理
- webpack入门(五)——webpack 故障处理
- Vue.js学习系列四——Webpack学习实践
- webpack入门学习(—)
- 傅里叶变换详解
- 【训练题】路面修整[1]
- Oracle的Merge into详解
- Effective Java学习记录
- Kinect V2开发(5)读关节数据
- 傻瓜式学习webpack(四)——图片处理
- 【转】从零开始学习音视频编程技术(二) 音频格式讲解
- 关于对Bootstrap.Table插件选择节点,全选所有子节点的问题?
- Java中的多线程
- 【sort 专题】179. Largest Number
- 前端在https请求的安全配置问题
- 1. Two Sum leetcode java
- SQL注入绕过技巧
- PrintWriter和FileWriter这两个类有什么区别