webpack杂记之__css兼容性处理方案

webpack杂记之__css兼容性处理方案

1. MiniCssExtractPlugin.loader
   这个插件是用来对CSS样式打包分类导出。

2. postcss-loader postcss-preset-env
   css兼容性处理。
   帮pstcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式。

webpack.config.js

{
loader:'postcss-loader',
options:{
ident:'postcss',
plugins:()=>[
//postcss的插件
require('postcss-preset-env')()
]
}
}

package.json


"browserlist":{
//开发环境--》设置node环境变量（在webpack.config.js设置）
"development":[
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
      ],
      // 兼容性是默认看生产环境
      "production":[
      ">0.2%",
      ”not dead",
      "not op_mini all "
      ]
      }

webpack.config.js

配置此环境变量，让兼容性默认从生产环境变成开发环境
 process.env.NODE_ENV='development';    

也就是兼容性按照以下标准来
"development":[
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
      ]