webpack学习之webpack处理字体图标
在讲webpack处理字体图标之前先讲一下css文件的压缩
默认打包的css文件是不压缩的,即便是生产环境也只是压缩js和html
压缩css文件使用插件: optimize-css-assets-webpack-plugin
如果只是单独使用了这个插件,那么js反而又不压缩了,所以还需要用到压缩js的插件:
terser-webpack-plugin
// 安装之后再 webpack.config.js中引入
// 压缩css
let OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 压缩js
const TerserPlugin = require('terser-webpack-plugin');
!注意:这两个插件不是配置在plugins中,而是单独配置在另一个属性 optimization 中
// 优化
optimization: {
minimize: true, // 是否压缩(这个属性很重要)
minimizer: [
new OptimizeCssAssetsPlugin(), // 压缩css文件
new TerserPlugin(), // 压缩js
]
},
处理图片及字体图标
处理图片和字体图片时统一需要使用到加载器: file-loader
下载之后 rules 属性中进行配置
// 加载图片
{
test: /\.(jpe?g|png|gif)$/,
// use: 'file-loader' // 直接这样写打包后的图片名是一串hash值
use: {
loader: 'file-loader',
options: {
// 打包后的图片放在 imgs下
// 图片名跟格式和打包前保持一致
name: 'imgs/[name].[ext]',
}
}
},
// 加载字体图标
{
test: /\.(eot|ttf|svg|woff)$/,
use: {
loader: 'file-loader',
options: {
// 打包后的字体图标放在 icon 目录下
// 文件名跟格式和打包前保持一致
name: 'icon/[name].[ext]',
}
}
},
只是单独使用加载器 file-loader 处理的图片最后都是通过http请求去获取的。
使用 url-loader 可以将图片转为base64格式,从而减少http请求。
// 加载图片
{
test: /\.(jpe?g|png|gif)$/,
// use: 'file-loader' // 直接这样写打包后的图片名是一串hash值
use: {
loader: 'url-loader',
options: {
name: 'imgs/[name].[ext]',
limit: 10*1024 // 小于10kb的图片会被转为base64格式(且不存放下imgs目录下),大于这个数的图片则默认用file-loader 处理
}
}
},