6.单独提取css，兼容性处理

1.单独提取css样式

插件：miniCssExtractPlugin

作用：miniCssExtractPlugin是用link标签引入css，代替style-loader style-loader作用是创建style标签

     {   test: /\.css$/,
         use: [  miniCssExtractPlugin.loader,
                 "css-loader",
       ]
      }
              

2.css兼容性处理

loader：postcss-loader postcss-preset-env

postcss-preset-env作用：是帮助package.json中browserslist里面的配置，通过配置加载制定的css兼容性样式

postcss-loader配置：

  {   test: /\.css$/,
      use: [  miniCssExtractPlugin.loader,
              "css-loader",
           {   loader: "postcss-loader",
               options: {
                        ident: 'postcss',
                        plugins: () => [//postcss的插件
                            require('postcss-preset-env')()
                            ]
                    }
                }
         ]
   }
 注意：默认配置写法："postcss-loader",
 修改配置写法：{  loader: "postcss-loader",
                options: {}
             }

browserslist配置：在package.json里配置

 //设置nodejs环境变量
 process.env.NODE_ENV = "development",

  "browserslist": {
   "development": [//开发环境--》设置node的环境变量：process.env.NODE_ENV
  "last 1 chrome version",//最近的chrome兼容
  "last 1 firefox version",
  "last 1 safari version"
  ],
  "production": [//生产环境默认配置
  ">0.2%",
  "not dead",
  "not op_mini all"
  ]
 }

3.压缩css

插件：optimize-css-assets-webpack-plugin

  const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

  new OptimizeCssAssetsWebpackPlugin()