解決wepacke配置postcss-loader時autoprefixer失效問題

今天在配置postcss-loader，使用autoprefixer發現根本沒有用。

postcss.config.js中是這樣的：

module.exports = {
  plugins:[
      require('autoprefixer')
  ]
}

然后打包也沒報錯，只是沒有起任何作用，一些需要加前綴的地方毫無變化。沒作用豈不是白配了。然后我又去搜索如何解決autoprefixer失效問題，發現還需要配置兼容的瀏覽器。我又按照方法在postcss.config.js中配置。

module.exports = {
  plugins:[
      require('autoprefixer')({
            "browsers": [
                "defaults",
                "not ie < 8",
                "last 2 versions",
                "> 1%",
                "iOS 7",
                "last 3 iOS versions"
            ]
        })
  ]
}

這里兼容瀏覽器的版本可以自己設置。

然后打包，結果成功，該添加的前綴都添加了。但是卻有一段警告：

 

 雖然不影響結果，可這紅的黃的提示對我們程序員來說十分不友好呀，所以我一定要干掉它。我用我蹩腳的英語理解了一下大概意思，就是使用  browserslist去替換browsers。browserslist不是添加在postcss.config.js中，而是添加在package.json中。這樣做是為了避免browsers可能會導致的錯誤。所以要想完美解決，就需要這樣：

postcss.config.js

module.exports = {
  plugins:[
      require('autoprefixer')
  ]
}

package.json

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

這段加在author，keywords同一級