webpack, css兼容性处理

1.mini-css-extract-plugin

用于抽离css文件，实现css/js分离，并且自动添加引用到相应html代码中

  // webpack.confing,js配置
  new MiniCssExtractPlugin({
            filename: 'css/index.css'
        }),

2.post-css postcss-preset-env

post-css用于样式兼容各大浏览器
postcss-preset-env 用于帮助post-css找到package.json中相应的配置。

// webpack.confing,js配置
 {
   loader：“postcss-loader”，
   options：{
     ident：“postcss”，
     plugins：() => [
      require("postcss-preset-env")()
     ]
   }
 }

// package.json中配置
// 具体配置去github查找browserslist。
 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

3.optimize-css-assets-webpack-plugin

用于压缩css代码，内置用法已经够用，可以直接使用，不需要单独配置