三（2）、样式处理优化 ------ 2020-07-05

1、抽离样式文件

（1）使用的插件：
- yarn add mini-css-extract-plugin -D

（2）引入
- const MiniCssExtractPlugin = require('mini-css-extract-plugin');

（3）配置：
- 放弃使用 style-loader
- new MiniCssExtractPlugin({
        filename: 'main.css'
  })
- module: {
        rules: [{
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    }

2、添加厂商前缀

（1）使用插件
- yarn add postcss-loader autoprefixer -D

（2）配置：
 module: {
        rules: [{
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'less-loader'
                ]
            }
        ]
    }

3、新增 postcss.config.js配置文件
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}
此时，不会添加厂商前缀；

4、解决办法1：
在package.json中添加配置 
"browserslist": [
        "last 2 versions",
        "> 1%",
        "iOS 7",
        "last 3 iOS versions"
  ]

3、压缩CSS代码：

（1）使用的插件：
yarn add -D optimize-css-assets-webpack-plugin

（2）引入：
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

（3）在plugin中配置：
老版本的教程是配置在优化项中，
optimization: {
        minimizer: [],
},

但是最新的是配置在 plugin中
 plugins: [
    new OptimizeCSSAssetsPlugin({})
],