webpack ——css兼容性处理

  需要安装 postcss  post-loader   postcss-preset-env

 postcss-preset-env 是用来引进package.json中browserlist配置项， browserlist配置项主要用来设置 css兼容性的具体要求。 具体的后面在讲

 在webpack配置中

 module:{rules:[{

      test:/\.css$/, //匹配css文件

      excluse:/(node_modules)/, // 不要在node_modules文件下查找

       user:['style-loader',css-loader,{

          loader:'postcss-loader',

         options:{

          postcssOptions:{plugin:[require('postcss-preset-env')]}  // 将package文件中的css兼容性样式引入进来

       }       

}]

}]}

   在package.json 文件中

     browserlist:[

    //  开发环境

        development:[

           "last 1 Chrome version", // 兼容Chrome浏览器最近的一个版本

          "last 1 firefox version" ,     // 兼容firefox 浏览器最近的一个版本  

            "last 1 safari version"  // 兼容 safari 浏览器最近的一个版本

] ,        

     production:[

    'cover 99.5%' ,  // 兼容全球主流浏览器百分之99.5

    "not ie <= 8 "  // 不考虑ie8或ie8以下版本

     "not op_mini all"  // 不考虑所有欧朋浏览器

]      

]

---

   默认情况是生产环境: 

  如果要设置到开发环境，需要设置node的环境    process.env.NODE_ENV = 'development'.

  postcssOption 是用来设置 postcss具体怎么做的。 然后我们引入一个 css兼容样式表，告诉postcss应该考虑哪些浏览器的问题。

      以上写法是webpack5 。  

---