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"
            ]
        })
    ]
}

後記

根據自己需要，以上三種方式選擇其一即可。