webpack4.x中使用postcss-loader、autoprefixer给不同浏览器CSS属性自动添加前缀的三种配置方法

为了兼容各大主浏览器，当我们在编写CSS相关属性的时候，需要添加兼容各浏览器的前缀，但是自己动手非常耗时、影响工作效率，所以就需要通过webpack帮我们自动处理。

比如使用display的flex属性：

div {
	display: flex
}

而我们的需求是：

div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

那么下来，我们就要去解决这个问题。

一、安装

 npm install postcss-loader autoprefixer -D

• 一些CSS的常见预处理器sass sass-loader less less-loader stylus stylus-loader可按需求自己安装。

二、使用

1. 单纯配置 webpack.config.js
2. 配置 webpack.config.js和package.json
3. 配置 webpack.config.js和创建postcss.config.js

1. 单纯配置 webpack.config.js

{
    test: /\.less$/,
    use: [{
            loader: 'style-loader'
        },
        {
            loader: 'css-loader'
        },
        {
            loader: 'postcss-loader',
            options: {
                plugins: [
                    require('autoprefixer')({
                        //必须设置支持的浏览器才会自动添加浏览器兼容
                        //注意：
                        //使用browsers属性也是可以编译生效，但编译中会提示下图中警告，可能会发生错误
                        //所以还是推荐使用overrideBrowserslist这个属性
                        overrideBrowserslist: [
                            "defaults",
                            "not ie <= 8",
                            "last 2 versions",
                            "> 1%",
                            "iOS >= 7",
                            "Android >= 4.0"
                        ]
                    })
                ]
            }
        },
        {
            loader: 'less-loader'
        }
    ]
}

2. 配置 webpack.config.js和package.json
首先 webpack.config.js配置文件中使用postcss-loader时引入autoprefixer插件

{
    test: /\.less$/,
    use: [{
            loader: 'style-loader'
        },
        {
            loader: 'css-loader'
        },
        {
            loader: 'postcss-loader',
            options: {
                //引入autoprefixer插件
                plugins: [
                    require('autoprefixer')
                ]
            }
        },
        {
            loader: 'less-loader'
        }
    ]
}

然后在package.json文件中添加设置支持的浏览器（与devDependencies同级）

"browserslist": [
    "defaults",
    "not ie <= 8",
    "last 2 versions",
    "> 1%",
    "iOS >= 7",
    "Android >= 4.0"
  ]

3. 配置 webpack.config.js和创建postcss.config.js
首先 webpack.config.js配置文件中使用postcss-loader时引入autoprefixer插件，同方式2

{
    test: /\.less$/,
    use: [{
            loader: 'style-loader'
        },
        {
            loader: 'css-loader'
        },
        {
            loader: 'postcss-loader',
            options: {
                //引入autoprefixer插件
                plugins: [
                    require('autoprefixer')
                ]
            }
        },
        {
            loader: 'less-loader'
        }
    ]
}

然后创建一个postcss.config.js配置文件，该文件与webpack.config.js在同一目录下，配置如下：

module.exports = {
    plugins: [
        require('autoprefixer')({
            //必须设置支持的浏览器才会自动添加添加浏览器兼容
            browsers: [
                "defaults",
                "not ie <= 8",
                "last 2 versions",
                "> 1%",
                "iOS >= 7",
                "Android >= 4.0"
            ]
        })
    ]
}

后记

根据自己需要，以上三种方式选择其一即可。