webpack 使用postcss 和autoprefixer

本文只是一個問題的記錄，並不適合初學者的學習

在webpack4中使用postcss+autoprefixer，為樣式添加前綴

第一種方法，在配置文件中配置postcss和autofixer，並配置適配瀏覽器范圍

//style
            {
                test: less_re,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('autoprefixer')({
                                    overrideBrowserslist: [   //這里autoprefixer 改成了這個
                                        "defaults",
                                        "not ie < 11",
                                        "last 2 versions",
                                        "> 1%",
                                        "iOS 7",
                                        "last 3 iOS versions"
                                    ]
                                })
                            ]
                        }
                    }，
　　　　　　　　　　　　'less-loader',

] },

 

 

第二種在與package.json統計別目錄下增加一個

".browserslistrc" 文件

// .browserslistrc
defaults
not ie < 11
last 2 versions
> 1%
iOS 7
last 3 iOS versions

或者在package.json中添加一個browserlist配置項

"browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

請注意如果配置完之后，打包沒有出現問題，但是style文件沒有成功添加瀏覽器前綴，那么90%的可能就是 上面說的瀏覽器適配配置出現了問題，以上的配置display是會出現前綴的。

 

配置方法還有很多中，只要有效都行，上面兩種只是通用一些並非絕對