本章主要讲述在webpack中，对文件的处理，主要讲解以下几个loader的使用配置：
- file-loader 处理文件路径
- url-loader 处理文件路径和生成base64图片
- image-webpack-loader 压缩图片质量
- postcss-sprites 生成雪碧图
使用file-loader
1、作用
file-loader能够对html/css/js中引入的文件路径进行配置打包进目标文件中。
2、安装
npm install file-loader --save-dev
3、webpack-config.js中的配置
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[hash:3]_[name].[ext]',// 打包后的文件名称
outputPath: '', // 默认是dist目录
publicPath: 'dist/images', // 图片的url前面追加'dist/images'
useRelativePath: true // 使用相对路径
}
}
]
}
使用url-loader 处理图片文件
1、作用
url-loader跟file-loader功能基本相同，url-loader是基于file-loader的，使用安装url-loader的时候要先安装file-loader，这两个的区别是url-loader有个limit属性，会对图片压缩成base64格式。
2、安装
npm install url-loader --save-dev
3、webpack-config.js中的常用配置
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
name: '[hash:3]_[name].[ext]',// 打包后的文件名称 ext是扩展名
outputPath: '', // 默认是dist目录
publicPath: 'dist/images/sprites', // 图片的url前面追加'dist/images'
useRelativePath: true, // 使用相对路径
limit: 1000 // 表示小于1K的图片会被转化成base64格式
}
}
]
}
使用url-loader处理字体
{
test: /\.(otf|eot|svg|ttf|woff|woff2)$/,
use: [
{
loader: 'url-loader',
options: {
name: '[name].[ext]',// 打包后的文件名称
outputPath: '', // 默认是dist目录
publicPath: 'dist/fonts', // 图片的url前面追加'dist/images'
useRelativePath: true, // 使用相对路径
limit: 50000 // 表示小于1K的图片会被转化成base64格式
}
}
]
}
使用img-loader压缩图片
1、作用
使用image-loader缩小 PNG，JPEG，GIF，SVG和WEBP图像。
2、安装
npm install img-loader --save-dev
3、options
- imagemin-pngquant 处理png
https://github.com/imagemin/imagemin-pngquant - imagemin-mozjpeg 处理jpq
https://github.com/imagemin/imagemin-mozjpeg - imagemin-gifsicle 处理gif
https://github.com/imagemin/imagemin-gifsicle - imagemin-svgo 处理svg
https://github.com/imagemin/imagemin-svgo
{
loader: 'img-loader',
options: {
plugins: [
require('imagemin-gifsicle')({
optimizationLevel：1, // 优化级别
//仅存储每个图像的更改部分。
//还使用透明度进一步缩小文件。
//尝试几种优化方法（通常较慢，有时更好的结果）
interlaced: false // 用于渐进式渲染的交错gif
}),
require('imagemin-mozjpeg')({
quality：60,// 这个是Number类型
progressive: true, // 默认true，false是创建基线jpg文件
arithmetic: false // 使用算数编码
}),
require('imagemin-pngquant')({
quality:'60-80', // 字符串类型
floyd: 0.5, // 控制抖动级别
speed: 2 //
}),
require('imagemin-svgo')({
plugins: [
{ removeTitle: true },
{ convertPathData: false }
]
})
]
}
}
4、webpack-config.js中的常用配置
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'img-loader',
options: {
plugins: [
require('imagemin-pngquant')({ // 压缩png图片
quality: '60'
})
]
}
}
]
}
参考：https://www.npmjs.com/package/img-loader
使用image-webpack-loader压缩图片
1、作用
使用image-webpack-loader缩小 PNG，JPEG，GIF，SVG和WEBP图像。
2、安装
npm install image-webpack-loader --save-dev
3、webpack-config.js中的常用配置
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'image-webpack-loader',
options: {
pngquant: {
quality: '65-80', // 压缩质量范围，这里是字符串
speed: 4
}
}
}
]
}
使用postcss-sprites合成雪碧图
1、作用
postcss-sprites可以对css中引入的图片合成雪碧图。
2、安装
npm install postcss --save-dev
npm install postcss-loader --save-dev
npm install postcss-sprites --save-dev
3、webpack-config.js中的常用配置
// 引入postcss-sprites
var PostCss_Sprites = require('postcss-sprites');
{
test: /\.css$/, // 正则匹配要识别的css
use: [
{
loader: 'style-loader', // 配置style-loader
options: {
singleton: true
}
},
{
loader: 'css-loader', // 配置css-loader
},
{
loader: 'postcss-loader', // 配置postcss-loader
options: {
ident: 'postcss',
plugins: [
PostCss_Sprites({ // 配置雪碧图
spritePath: './dist/images/sprites', //生成雪碧图路径
retina: true // 识别视网膜，2倍图，要注意的是图片需要改成[email protected]这种格式，postcss才会识别
})
]
}
}
]
}