前言
我们一般打包，webpack 会自动把 css 打包到 js 文件中去。css 抽取 就是是把 css 抽取出来，生成 css 文件单独打包，然后在进行压缩。
接下来，我详细介绍下 css 是如何抽取 和 压缩的！
CSS 抽取
安装：npm install mini-css-extract-plugin -D
在 webpack.config.js 中的 plugin 配置
引入：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 插件
plugins:[
new HtmlWebpackPlugin({
// 默许指定 模板的路径 否则会篡改网页 title
template: resolve('public/index.html')
}),
// 打包时删除之前已生成的文件，可配置多个路径
new CleanWebpakPlugin(['dist']),
// 抽取公共 CSS
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
]
注意：在没有安装
mini-css-extract-plugin之前，是用css-loader把css样式打包到js文件中去，用style-loader把js中的文件放到style标签里去。
但用了mini-css-extract-plugin只后就用不到style-loaser了
之前配置
{
test: /\.css$/,
// loader 处理方式 是 从下往上 从右往左
use: ['style-loader', 'css-loader']
}
改成，不改这的话，不会生效
{
test: /\.css$/,
// loader 处理方式 是 从下往上 从右往左
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
CSS 压缩
安装：npm install optimize-css-assets-webpack-plugin -D
注意：这是一个优化配置，需要在和 `entry 、output、modulehe 和 plugins` 等平级的 optimization 中；
引入：
const OptimizeCSSAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
配置：
// 插件
plugins:[
new HtmlWebpackPlugin({
// 默许指定 模板的路径 否则会篡改网页 title
template: resolve('public/index.html')
}),
new CleanWebpakPlugin(['dist']),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
],
// 优化配置
optimization:{
// 在这里配置 CSS 压缩
minimizer: [new OptimizeCSSAssetsWebpackPlugin()]
}
