webpack 图像压缩_webpack提取图片文件打包压缩

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

压缩抽离的图片资源

配置生成html中的图片路径

一、准备测试环境

//工作区间

src//文件夹

index.js//入口文件

index.css//样式文件

index.html//结构文件

image//图片文件夹

package.json//配置打包的环境信息

webpack.config.js//打包配置文件

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

1 "clean-webpack-plugin": "^3.0.0",//清除构建文件夹

2 "css-loader": "^3.0.0",//用来加载css文件

3 "html-webpack-plugin": "^3.2.0",//用来抽离html文件

4 "style-loader": "^0.23.1",//用来将css样式转换成行间样式

5 "webpack": "^4.35.2",//打包工具

6 "webpack-cli": "^3.3.5"//打包工具的指令集

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