傻瓜式学习webpack（四）—

有了前面三章的基础，利用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

傻瓜式学习webpack（四）——图片处理相关推荐

《Spring+Spring MVC+MyBatis从零开始学》傻瓜式学习笔记
前言:买这本书主要是为了学MyBatis.所以着重记一下第六章以及后面的. 目的:学习大量开发知识,早日跳槽去更好的单位.[2019年09月02日] 错误更改:第六章 6.2.3 第73页示例6-4 ...
.NetCore微服务Surging新手傻瓜式入门教程学习日志---结构简介（二）
.NetCore微服务Surging新手傻瓜式入门教程学习日志---结构简介(二) 原文:.NetCore微服务Surging新手傻瓜式入门教程学习日志---结构简介(二) 先上项目解决方案图 ...
网络爬虫学习软件篇-Python(一)下载安装（超详细教程,傻瓜式说明）
很早就想学习一下网络爬虫了~苦于学艺不精并且过于懒惰以至于迟迟没有行动~最近因为项目做的也差不多了,就用空学习一下这门新的语言,了解一下新的技术.(PS:真的不会排版丑就丑点吧) 上面所说的傻瓜式说明 ...
【Autogluon】傻瓜式深度学习框架
Autogluon傻瓜式深度学习提示:这里简述项目相关背景: 安装教程可参考: 教程: https://blog.csdn.net/lichangzhen2008/article/details/1 ...
修改视频音频图片文件MD5软件教程傻瓜式操作
先看图如下这个软件修改批量修改文件的MD5,具有速度快,多文件批量.使用方法也很简单,先设置保存目录后,你只要文件导入软件列表后点击开始修改即可,支持图片,声音,视频等,傻瓜式操作,软件为共享软件, ...
centos 7+ssr傻瓜式安装（仅供学习使用）
安装ssr wget -N --no-check-certificate https://raw.githubusercontent.com/ToyoDAdoubi/doubi/master/ssr. ...
生信宝典之傻瓜式 (五) - 文献挖掘查找指定基因调控网络
▼生物信息学习的正确姿势(第三版) NGS系列文章包括NGS基础.转录组分析 (Nature重磅综述|关于RNA-seq你想知道的全在这).ChIP-seq分析 (ChIP-seq基本分析流程).单细 ...
[软件工具][原创]yolov7快速训练助手使用教程傻瓜式训练不需要写代码配置参数
yolov7的发布标志着深度学习目标检测领域又新增一员虎将,是darknet原作者团队最新力作.为了跟上时代发展要求,yolov7快速训练助手更新出来.本此更新依旧面向懒人和初学者,使用非常简单. 第 ...
全网最全抓包攻略丨傻瓜式Fiddler教程大全丨手把手从安装到抓包
前言在我们做接口测试的时候,经常需要验证发送的消息是否正确,或者在出现问题的时候,查看手机客户端发送给server端的包内容是否正确,就需要用到抓包工具. 今天,给大家带来最常用的Fiddler的傻 ...

傻瓜式学习webpack（四）——图片处理

傻瓜式学习webpack（四）——图片处理相关推荐

最新文章

热门文章