webpack 如何配置 CSS抽取 和 打包压缩

前言

我们一般打包，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()]
}