• 抽离图片文件打包到指定路径下
  • 压缩抽离的图片资源
  • 配置生成html中的图片路径

一、准备测试环境

//工作区间
src//文件夹
index.js//入口文件
index.css//样式文件
index.html//结构文件
image//图片文件夹
package.json//配置打包的环境信息
webpack.config.js//打包配置文件

首先需要准备打包插件(这里打包文件还不是用来处理图片文件的):

   "clean-webpack-plugin": "^3.0.0",//清除构建文件夹
"css-loader": "^3.0.0",//用来加载css文件
"html-webpack-plugin": "^3.2.0",//用来抽离html文件
"style-loader": "^0.23.1",//用来将css样式转换成行间样式
"webpack": "^4.35.2",//打包工具
"webpack-cli": "^3.3.5"//打包工具的指令集

通过上面的注释,可以看到上面的打包配置还不能处理图片资源,所以在测试上面的打包插件配置是否成功的情况下暂时不要在css中出现引用图片路径的样式,在html引入的图片路径在抽取html文件的时候并不会对路径进行处理,打包后(打包前后路径不一致)可能会找不到图片。

 var path = require('path');
var {CleanWebpackPlugin} = require('clean-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:{
index:'./src/index.js'
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name][hash:5].bundle.js'
},
module:{
rules:[
{
test:/\.css$/,
use:[
{loader:'style-loader'},
{loader:'css-loader'}
]
}
]
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
mode:'development'
}

webpack.config.js文件代码

测试上面的打包环境无误的情况下正式进入webpack提取图片文件操作。

二、抽离图片文件打包到指定路径下

在前面准备的打包配置基础上再增加两个加载器插件:

npm install url-loader --save-dev
npm install file-loader --save-dev

然后,这一步就可以给css代码中添加图片路径了,config.js文件中添加下面这段配置:

 module:{
rules:[
{
test:/\.(png|jpg|jpeg|gif)$/,
use:[
{
loader:'url-loader',
options:{
name:'[name][hash:5].[ext]',//设置抽离打包图片的名称--[ext]用来获取图片的后缀
limit:100000,//限制图片大小 <= 100kb 进行base64编码(小于100kb打包进js文件)--测试时根据图片的大小调整
outputPath:'image'//设置输出文件夹名称,这个文件夹会与主入口文件在同一路径下
}
}
]
}
]
}

这段配置也还只能配置抽离css中的图片文件,而且还只是抽离,并未对图片进行压缩处理,接下来看怎么配置压缩图片文件。

三、压缩抽离的图片资源

继续前面的步骤,下载安装图片压缩需要的加载器:

npm install img-loader --save-dev
npm install imagemin-loader --save-dev
npm install imagemin-pngquant --save-dev

然后图片资源(正则匹配图片后缀)的加载器模块下添加图压缩相关加载器和插件,为了更好的展示代码结构这段代码会与上一步的示例代码部分重叠:

 module:{
rules:[
{
test:/\.css$/,
use:[
{loader:'style-loader'},
{loader:'css-loader'}
]
},
{
test:/\.(png|jpg|jpeg|gif)$/,
use:[
{
loader:'url-loader',//给图片资源配置路径加载器,用于文件抽离
options:{
name:'[name][hash:5].[ext]',//设置抽离打包图片的名称--[ext]用来获取图片的后缀
limit:100000,//限制图片大小 <= 100kb 进行base64编码(小于100kb打包进js文件)--测试时根据图片的大小调整
outputPath:'image'//设置输出文件夹名称,这个文件夹会与主入口文件在同一路径下
}
},
{
loader:'img-loader',//配置图片资源加载器,用于图片压缩
options:{
plugins:[//给图片资源加载配置插件
require('imagemin-pngquant')({//用于图片压缩的imagemin-pngquant,还有一个隐式调用的加载器imagemin-loader
quality:[0.3,0.5]//图片压缩30%~50%
})
]
}
}
]
}
]
}

最后,就剩下html文件中的图片引用没有处理。

四、配置生成html中的图片路径

通过配置html文件的加载器,然后再配置上应用图片的标签名和属性名,html资源中的图片应用就会被添加到加载器中进行处理(包括上面的图片抽离和压缩),先下载解析html文件的加载器:

npm install html-loader --save-dev

config配置(增加以下配置):

 module:{
rules:[
{
test:/\.html$/,
use:[
{
loader:'html-loader',
options:{
attrs:['img:src']//配置html文件中img标签的src属性值
}
}
] }
]
}

最后需要注意的是,针对每种图片格式的压缩配置都不是一样的,也就是说有不同的压缩插件,详细参考npm插件手册:https://www.npmjs.com/package/img-loader

webpack提取图片文件打包压缩的更多相关文章

  1. C#实现对图片文件的压缩、裁剪操作实例

    本文实例讲述了C#对图片文件的压缩.裁剪操作方法,在C#项目开发中非常有实用价值.分享给大家供大家参考.具体如下: 一般在做项目时,对图片的处理,以前都采用在上传时,限制其大小的方式,这样带来诸多不便 ...

  2. .Net Core 文件打包压缩

    最近项目需要实现多文件打包的功能,尝试了一些方法,最后发现使用  ICSharpCode.SharpZipLib 最符合项目的要求. 具体实现如下: 1.在 Nuget 中安装  ICSharpCod ...

  3. 【JavaScript】 Webpack安装及文件打包

    背景 最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...

  4. C#对图片文件的压缩、裁剪操作初探

    在做项目时,对图片的处理,以前都采用在上传时,限制其大小的方式,这样带来诸多不便.毕竟网站运维人员不一定会对图片做处理,经常超出大小限制,即使会使用图片处理软件的,也由于个人水平方面原因,处理效果差强 ...

  5. C#对图片文件的压缩、裁剪操作

    在做项目时,对图片的处理,以前都采用在上传时,限制其大小的方式,这样带来诸多不便.毕竟网站运维人员不一定会对图片做处理,经常超出大小限制,即使会使用图片处理软件的,也由于个人水平方面原因,处理效果差强 ...

  6. Linux_文件打包,压缩,解压

    一.压缩命令 文件格式:*.gz 命令:gzip 文件名 (ps:不能压缩目录,切压缩后不保留原文件) 压缩前 -rw-r--r--. 1 root root 315 Sep 6 21:03 df.t ...

  7. Linux文件打包压缩、解压缩、备份命令使用方法(转载)

    对于刚刚接触Linux的人来说,一定会给Linux下一大堆各式各样的文件名给搞晕.别个不说,单单就压缩文件为例,我们知道在Windows下最常见的压缩文件就只有两种,一是,zip,另一个是.rar.可 ...

  8. webpack 提取 manifest 文件

    当 webpack 生成 bundle 时, 它同时维护一个 manifest 文件.你可以在生成的 vendor bundle 中找到它.manifest 文件描述了哪些文件需要 webpack 加 ...

  9. Webpack - 把json文件打包进js文件

    把html文件打包进index.js   1  新建文件 typings.d.ts    declare module "*.html" {   const content: st ...

随机推荐

  1. 1.4 Go语言基础之流程控制

    流程控制是每种编程语言控制逻辑走向和执行次序的重要部分,流程控制可以说是一门语言的"经脉". Go语言中最常用的流程控制有if和for,而switch和goto主要是为了简化代码. ...

  2. ThreadUtils

    import android.os.Handler; import android.os.Looper; import java.util.concurrent.ExecutorService; im ...

  3. 【转】实现1080P延迟低于500ms的实时超清直播传输技术

    最近由于公司业务关系,需要一个在公网上能实时互动超清视频的架构和技术方案.众所周知,视频直播用 CDN + RTMP 就可以满足绝大部分视频直播业务,我们也接触了和测试了几家 CDN 提供的方案,单人 ...

  4. [PySpark] RDD programming on a large file

    重难点 一.parallelize 方法 一般来说,Spark会尝试根据集群的状况,来自动设定slices的数目.然而,你也可以通过传递给parallelize的第二个参数来进行手动设置. data_ ...

  5. CPU-内存-IO-网络调优

    一.关于CPU 中央处理器调优 1. CPU处理方式: 批处理,顺序处理请求.(切换次数少,吞吐量大) 分时处理.(如同"独占",吞吐量小)(时间片,把请求分为一个一个的时间片,一 ...

  6. 手写web框架之加载配置项目

    一  定义框架配置项 在项目的src/main/resources目录下创建一个名为smart.propertiesd的文件,文件的内容如下: smart.framework.jdbc.driver= ...

  7. java中,有关移位运算符的有关讨论

    java中有三种移位运算符 <<      :     左移运算符,num << 1,相当于num乘以2 >>      :     右移运算符,num >& ...

  8. flask(1.1)装饰器装饰多个视图函数出现的问题

    目录 1.装饰器装饰多个视图函数出现的问题 2.使用装饰器修复技术解决该问题 1.装饰器装饰多个视图函数出现的问题 代码实例: from flask import Flask, request, re ...

  9. 修改主机名(/etc/hostname和/etc/hosts区别)

    ubuntu永久修改主机名 1.查看主机名 在Ubuntu系统中,快速查看主机名有多种方法:其一,打开一个GNOME终端窗口,在命令提示符中可以看到主机名,主机名通常位于“@”符号后:其二,在终端窗口 ...

  10. prometheus 的promsql的经典例子 安装grafana

    0.好的参考文档 https://www.cnblogs.com/longcnblogs/p/9620733.html 1.多维度数据 2.Prometheus的全局监控指标 只需要定义一个全局的指标 ...