webpack（13）处理样式兼容问题和压缩css文件

前言

之前处理了JS的兼容问题，将高级语言转换成浏览器能识别的语言，同样的，在不同的浏览器，甚至不同版本的浏览器的之间样式也会存在兼容性的问题，现在我们就来解决样式的兼容性问题。

webpack中提供了一个loader来解决：postcss-loader
1、下载依赖,postcss-loader依赖于postcss，postcss-loader需要使用postcss-preset-env来进行智能预设，决定样式如何进行兼容。

npm install --save-dev postcss-loader postcss postcss-preset-env

2、基本使用，postcss-loader需要在css-loader的下一层，less-loader和scss-loader的上一层，顺序不能弄错。因为样式配置有好几个，代码重复比较多，抽出来减少代码量。

// 封装一个样式loader处理的方法，减少重复性代码
const getCssLoader=function(prePaser){
    return [
        MiniCssExtractPlugin.loader,
         'css-loader',
        // 如果默认配置就可以直接写loader就可以了，但是需要配置的就要写成对象形式
        // 在options中写想要的配置
        {
            loader: 'postcss-loader',
            options: {
                postcssOptions: {
                    plugins: [
                        [
                            'postcss-preset-env',//这个就能解决大多数样式兼容性问题
                        ],
                    ],
                },
            }
        },
        prePaser,
    ].filter(Boolean);//[].filter(Boolean)方法，过滤掉undefined，空字符串等为false的数据
}

几个样式的rules配置

{
                test: /\.css$/,//匹配.css后缀名字的文件
                use: getCssLoader(),
            },
            {
                test: /\.less$/,
                use: getCssLoader('less-loader'),
            },
            {
                test: /\.s[ca]ss$/,
                use: getCssLoader('sass-loader'),
            },

1）没有配置样式兼容时，使用8位数表示背景颜色加透明度，无法转成ragb

2）配置后

要想具体设置兼容的参数，在package.json中添加，下面的配置取得是交集。

"browsersList": [
    "last 2 version",//兼容浏览器最新两个版本
    ">1%",//兼容99%的浏览器
    "not dead",//标记已死的浏览器不要
  ]

压缩css代码

之前单独打包的css代码是没有经过压缩的，要是生产环境，压缩的代码可以减少资源的使用，减少加载的时间。

webapck提供了插件CssMinimizerWebpackPlugin

下载依赖：

npm install css-minimizer-webpack-plugin --save-dev

引入插件：

const cssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');//引入压缩css的插件

在plugins中配置插件：

new cssMinimizerWebpackPlugin(),

打包生产后的代码就是压缩过的：