解決：webpack4->postcss->autoprefixer配置 警告：Replace Autoprefixer browsers option to Browserslist config. Use browserslis

webpack4 使用postcss 配置 autoprefixer。當打包時，會提示警告：Replace Autoprefixer browsers option to Browserslist config. Use browserslis 巴拉巴拉。。。

3種方式：

方法1：posscss.config.js 文件

module.exports = {
    plugins: {
      // 兼容瀏覽器，添加前綴
      'autoprefixer':{
          overrideBrowserslist: [
            "Android 4.1",
            "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            "ie >= 8"
            //'last 10 versions', // 所有主流瀏覽器最近10版本用
        ],
        grid: true
      }
    }
}

 

也可以這么寫：

方法2：posscss.config.js 文件

module.exports = {
    plugins: [
      // 兼容瀏覽器，添加前綴
      require('autoprefixer')({
        overrideBrowserslist: [
          "Android 4.1",
          "iOS 7.1",
          "Chrome > 31",
          "ff > 31",
          "ie >= 8"
          //'last 10 versions', // 所有主流瀏覽器最近10版本用
      ],grid: true})

    ]
  }

 

方法3：package.json 文件 加：

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

posscss.config.js 文件

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

方法3就是把配置信息放到了package.json里

-------------------------------------------------------------------

題外話：從搜索解決問題的角度看，使用webpack的前端人還是比較少的。因為很多因為版本更新導致的配置錯誤的答案還在。容易誤導我這樣的新手。