前言

上一篇，我们说了webpack对css的引入方式，现在我们再来说说css兼容在webpack中是如何进行的。

css兼容

我们都知道css是相对于浏览器的，所以兼容也是对于浏览器进行，那么哪些浏览器是需要进行兼容处理呢？这里我们使用 caniuse ，这个网站的作用就是对 CSS，JS 的一些兼容性进行展示，从而让我们得心应手。

对浏览器进行兼容，一般都是给css加上各浏览器的前缀，每一个css都手动添加的话，过于繁琐，有的时候还可能会遗漏，不利于开发，于是就出现了 browserslitrc 和 postcss 。

browserslitrc 和 postcss

1. browserslitrc文件

对于browserslitrc ，你可能见过，使用脚手架创建的项目，在package.json中结尾处，以这样的形式出现：

讲讲参数，> 1%: 支持市场份额大于 1% 的浏览器，last 2 version: 即支持各类浏览器最近的一个版本，当然这里的 2 是可变的数字。

我们这里放在单独的 browserslistrc 文件里，之间创建 .browserslistrc 文件（名称就是这个，. 前面什么都没有）

先安装 npm i browserslist , 然后在控制台运行命令 npx browserslist ,就会显示出浏览器。

2. postcss处理

第一步，进行插件的安装：
npm i postcss postcss-cli -D

这里还需要配合 autoprefixer ，也是需要安装的，Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里。

创建一个css文件用于测试，这里我创建test文件，样式如下：

此时需要用到一条命令： npx postcss --use autoprefixer -o ret.css ./src/css/test.css ret.css是你运行命令后生成文件的名称。在ret中就能看到css被加上了前缀。

3.postcss-loader

接上文，如果你的css很多，这时候就会对每个css运行一遍添加前缀命令，过于麻烦，此时就出现了postcss-loader,由于使用的是webpack5，所以直接安装最新版本，如果使用 webpack v4 的话，你需要安装 postcss-loader v4。

在webpack.config.js中添加参数：

module:{
    rules:[
        {
            test: /\.css$/, //使用正则匹配.css后缀的文件
            //style-loader,css-loader有执行先后顺序，不然打包会出错
            use: ['style-loader',
                  'css-loader',
              {
                loader:'postcss-loader',
                options:{
                    postcssOptions:{
                        plugins:[
                            require('autoprefixer')
                        ]
                    }
                }
              }
            ]
        }
    ]
}

postcss工作是在css-loader之前，先把需要添加的前缀添加上，再把css代码交给css-loader,处理之后交给style-loader。

配置好loader，不需要再运行上文的命令来生成css文件，直接对项目进行打包 npm run build ,页面控制台中就能看到css自动添加上了前缀。

4.postcss-preset-env

这里在说一个小点，某些新的css特性 autoprefixer 不能帮我们转换，它只能帮助我们添加浏览器前缀。

例如，把此题颜色修改成16进制：

.title{
    color:#12345678;
}

不是所有浏览器都支持这种 8 位十六进制颜色码，结果就是没效果或者报错，这个时候就可以使用 postcss-preset-env 插件来实现对 CSS 特性的转换了。

需要安装它，因为它也是个独立的插件, npm install postcss-preset-env -D

还是一样在 webpack.config.js 中引入，如下：

module:{
    rules:[
        {
            test: /\.css$/, //使用正则匹配.css后缀的文件
            //style-loader,css-loader有执行先后顺序，不然打包会出错
            use: ['style-loader',
                  'css-loader',
              {
                loader:'postcss-loader',
                options:{
                    postcssOptions:{
                        plugins:[
                            require('autoprefixer'),
                            require('postcss-preset-env')
                        ]
                    }
                }
              }
            ]
        }
    ]
}

重新打包项目，查看浏览器控制台，会发现 color 值被转换成了 rgba ，多数浏览器都是支持 rgba

因此，开发中，对于一些现代 CSS 特性，更多情况下，我们会使用 postcss-preset-env 这个插件，而不是 autoprefixer 这个插件。

总结

到此，webpack对css的兼容问题就说完了，希望对你有所帮助，同时呢，有不足的地方也请评论指出，下一篇将分享《webpack对图片资源的处理方法》，尽情期待。

Webpack对CSS的兼容处理

前言