webpack 打包图片(5)
2019-06-10 本文已影响15人
瓦力博客
获取全套webpack 4.x教程，请访问瓦力博客
这小节小菜带大家写有关图片的配置，在web中处理图片好像没有什么特别需要处理的，小菜能想到的主要是图片的路径问题，还有去缓存以及图片压缩。
本小节主要功能：
- 在页面中使用图片
- 在css中使用图片
- 在js脚本中使用图片
- 去缓存
- 图片压缩
1.文件结构
myProject
|-dist
- |-index.html
- |-main.js
|-node_modules
|-src
|-assets
|-css
|-index.css
|-less
|-index.less
|-sass
|-index.scss
+ |-images
+ |-wali_logo.png
|-index.html
|-index.js
|-package.json
|-webpack.config.js
|-postcss.config.js
2.引入图片路径
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="logo">
<h1>!!!欢迎来到瓦力博客!!!</h1>
</div>
<img src="./assets/images/wali_logo.png">
</body>
</html>
src/index.js
import "./assets/css/index.css"
import wali from "./assets/images/wali_logo.png";
var img = document.createElement('img');
img.src = wali;
document.body.appendChild(img);
src/assets/css/index.css
.logo{
width: 200px;
height: 200px;
color: red;
background: url("../images/wali_logo.png") center;
background-size: cover;
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode:'development',
entry:'./src/index.js',
module:{
rules:[
{
test:/\.css$/,
use:[
'style-loader',
{
loader:'css-loader',
options:{
importLoaders:1
}
},
'postcss-loader'
]
},
{
test:/\.scss$/,
use:[
'style-loader',
{
loader:'css-loader',
options:{
importLoaders:2
}
},
'sass-loader',
'postcss-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
{
loader:'css-loader',
options:{
importLoaders:2
}
},
'less-loader',
'postcss-loader'
]
},
+ {
+ test:/\.(png|svg|jpeg|jpg|gif)$/,
+ use:[
+ {
+ loader:'file-loader',
+ options:{
+ name:'[name]', //[path] 上下文环境路径
+ publicPath:'./assets/image/', //公共路径
+ outputPath:'assets/image/', //输出路径
+ }
+ }
+ ]
+ },
+ {
+ test: /\.html$/,
+ use:[
+ {
+ loader:'html-loader',
+ options:{
+ arrts:['img:src','img:data-src'],
+ minimize:false //是否压缩html
+ }
+ }
+ ]
+ }
]
},
plugins: [
new HtmlWebpackPlugin({
title: '瓦力博客',
template: './src/index.html' //以src/index.html为编译模板
}),
new CleanWebpackPlugin()
],
output:{
path: path.resolve(__dirname,'dist')
}
}
在处理图片的配置中，file-loader中publicPath是指当匹配到这个图片之后，在路径前面添加./assets/image/。暂时这么写是因为本地打开html的协议file:///协议并不是http://协议。我在后面会重新配置，这里只是暂做演示。
安装laoder
yarn add file-loader
yarn add html-loader
运行webpack
yarn run dev
运行后，没有报错。我们打开dist/index.html文件。
ssl
3.去缓存
不知道大家仔细看没有上面那张截图，图片名称是wali_logo.png。如果这样就会带来一个缓存问题，缓存问题是怎么来的呢？当我们把服务器上的图片更新之后，刷新页面，浏览器本地缓存的图片不会被换掉。那么用户就不能及时看到最新的界面。要解决这个问题，那就是让webpack在打包图片时，每次对图片都生成一个不同的名字。刷新浏览器就不会缓存之前的图片了。如果想了解浏览器缓存{:target="_blank"}
webpack.config.js
{
test:/\.(png|svg|jpeg|jpg|gif)$/,
use:[
{
loader:'file-loader',
options:{
+ name:'[name][sha512:hash:base64:7].[ext]',
publicPath:'./assets/image/',
outputPath:'assets/image/',
}
}
]
}
重新编译webpack
yarn run dev
ssl
4.图片压缩
index.html
小菜感觉图片压缩没什么用，一般设计给出来的图片基本就很难在压缩了。图片压缩效果并不是特别理想，为了演示图片被真的压缩了，小菜找了一张比较大的图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="logo">
<h1>!!!欢迎来到瓦力博客!!!</h1>
</div>
<img src="./assets/images/test.jpg">
</body>
</html>
大家自己要在网络上找一张图片，放在src/assets/images/test.jpg
webpack.config.js
{
test:/\.(png|svg|jpeg|jpg|gif)$/,
use:[
{
loader:'file-loader',
options:{
name:'[name].[ext]', //[path] 上下文环境路径
publicPath:'./assets/image/', //公共路径
outputPath:'assets/image/', //输出路径
}
},
+ {
+ loader: 'image-webpack-loader',
+ options: {
+ mozjpeg: {
+ progressive: true,
+ quality: 65
+ },
+ // optipng.enabled: false will disable optipng
+ optipng: {
+ enabled: false,
+ },
+ pngquant: {
+ quality: '65-90',
+ speed: 4
+ },
+ gifsicle: {
+ interlaced: false,
+ },
+ // the webp option will enable WEBP
+ webp: {
+ quality: 75
+ }
+ },
+ },
]
}
运行webpack
yarn run dev
ssl
大家可以看到在编译前图片1.39M编译后变成288k，图片被压缩了。这样图片可能会有失真，所以上面的参数大家还是根据自己的实际情况自己调整。小菜建议用默认配置，或者就不要配置图片压缩。设计在给到图片的时候相信应该是最小图片了。
还原成默认配置
{
test:/\.(png|svg|jpeg|jpg|gif)$/,
use:[
{
loader:'file-loader',
options:{
name:'[name].[ext]', //[path] 上下文环境路径
publicPath:'./assets/image/', //公共路径
outputPath:'assets/image/', //输出路径
}
},
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true, // webpack@1.x
disable: true, // webpack@2.x and newer
},
},
]
}
