webpack4.x 安裝postcss-loader 配合 autoprefixer 解決css3的兼容性

安裝

瀏覽器前綴需要 post-loader、autoprefixer 

cnpm install --save-dev css-loader style-loader postcss-loader autoprefixer

配置webpack.config.js

{
    test:/\.css$/,
    use:[
      {loader:'style-loader'},
      {
        loader:'css-loader',
          options:{
            importLoaders:1
          }
      },
      {loader:'postcss-loader'}

]

根目錄創建postcss.config.js

在項目根目錄創建 postcss.config.js，並且設置支持哪些瀏覽器，必須設置支持的瀏覽器才會自動添加添加瀏覽器兼容

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