webpack抽离和压缩css文件

1、为什么要抽离和压缩css文件

在生产环境，css代码必须抽离和压缩，不然打包会把css文件打包到js文件中，体积会比较大。（执行这个js再把css解析出来，塞到html中，这样性能并不好）

2、抽离css文件

在开发环境下，不用抽离css文件，所以对css文件的处理还是常规的loader处理即可

 {
                test: /\.css$/,
                loader: ['style-loader', 'css-loader', 'postcss-loader'] 
            },

在生成环境中，webpack.prod.js文件内

1. 安装mini-css-extract-plugin插件
2. 引入插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

3. 抽离css

  {
                test: /\.css$/,
                loader: [
                    MiniCssExtractPlugin.loader,  
                    'css-loader',
                    'postcss-loader'
                ]
            },

在dev的环境中，最后用的是style-loader，
而在prod环境下，不再用 style-loader，而是用MiniCssExtractPlugin.loader。

然后在plugins中，加了一个抽离css文件的插件。
filename，是抽离出来的css文件名（会在指定的打包出口文件夹下生成css文件夹）

  plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/main.[contentHash:8].css'
        })
    ],

3、压缩css文件

1. 安装两个插件
   terser-webpack-plugin和optimize-css-assets-webpack-plugin
2. 引入

const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

3. 配置
   optimization于plugins平级

optimization: {
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    }

css文件压缩后

1. 变成一行了，空格没了
2. 注释没了