webpack--css的兼容性处理和压缩

css兼容性处理我们需要使用一个库：postcss 要想使用这个库，我们必须使用两个东西，一个loader和一个插件postcss-loader 和 postcss-preset-env
所以我们需要进行下载：
$ npm i postcss-loader postcss-preset-env -D

postcss-preset-env的作用：
帮助postcss找到package.json文件中的browserslist里面的配置，通过配置加载指定的兼容性样式

由于我们是解决css兼容性的问题，所以我们的配置写在打包css的loader中
如果我们使用默认配置就直接在use中写 ‘postcss-loader’，但是我们大多数不使用默认配置，所以需要进行修改loader配置
在use数组中在添加一个对象用来配置postcss

use: [
    'css-loader',
    {
        loader: 'postcss-loader',
        options: {
            ident: 'postcss',
            plugins: () => [
                require('postcss-preset-env')()
            ]
        }
    }
]

在package.json文件中写 browserslist配置：

"browserslist": {
    "development": [   //开发环境的配置
        "last 1 chrome version",          //最近的一个版本
        "last 1 firefox version",
        "last 1 safari version"
    ],
    "production": [    //生产环境的配置
        ">0.2%".        //大于99.8%的浏览器
        "not dead",         //不要已经死的浏览器
        "not op_mini all"      //不要op_mini的浏览器
    ]
}

但是我们默认看生产环境的配置，我们在学习，调试时我们通常使用的是开发环境，所以我们需要进行模式 的转换
我们需要在同进行设置：
postcss.env.NODE_EVN = “development” //这样就看开发环境的配置了

css的压缩：
我们需要一个插件就可以进行完成，我们先进行下载optimize-css-assets-webpack-plugin
$ npm i optimize-css-assets-webpack-plugin -D
我们进行引入，然后在plugins插件进行直接的使用即可 new OptimizeCss-assetsWebpackPlugins()