webapck处理页面中的css

1. 需要注册插件：

"style-loader": "^1.2.1",
"css-loader": "^3.5.3",

"less-loader": "^6.1.0",

"autoprefixer": "^9.8.0",
"postcss-loader": "^3.0.0",

"mini-css-extract-plugin": "^0.9.0",
将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap
比如：你的项目引入了公用样式common.css，又在其他独立页面/procuct引入了独立的protcut.css样式,如果没有进过该插件处理，这个两个css样式文件的内容会以两个style标记的形式插入页面，而如果使用了样式分离插件，这两个css文件打包后依然是两个独立的css文件。

// 老牌工具uglify不支持es6，且uglify-es不再更新，所以选择terser作为js代码压缩工具
"terser-webpack-plugin": "^3.0.4",
// css压缩
"optimize-css-assets-webpack-plugin": "^5.0.3",

2. 使用postcss需要写对应的配置

// postcss.config.js
module.exports = {
  plugins: [
      require('autoprefixer')
  ]
}

使用postcss会用到autoprefixer插件，而使用autoprefixer插件需要配置browserslist
独立配置browserslist文件或者在package.json中添加配置

// 在package.json中添加
"browserslist": [
    "defaults"
]

3. 在webpack中使用css相关插件

// webpack.prd.js
optimization: {
    minimize: true, //取代 new UglifyJsPlugin(/* ... */)
    // new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})压缩css样式
    minimizer: [new TerserJSPlugin({
      terserOptions: {
        compress: {
          // 打包的时候，过滤console.log代码
          // pure_funcs: ["console.log"]
          // 注释的代码是不会打包的
          // warnings: true,
          drop_debugger: true,
          drop_console: true
        }
      }
    }), new OptimizeCSSAssetsPlugin({})]
  },

// webpack.common.js
...
plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    // 分离样式文件，否则所有的样式都会以style标签的形式直接插入head标签中
    new MiniCssExtractPlugin({
      filename: 'static/css/[name].css',
      chunkFilename:  global._ENV === 'dev' ? '[id].css' : 'static/css/[id].[hash:5].css'
    }),
  ],
...
{
          // test: /\.(sa|sc|c)ss$/,
          test: /\.(le|c)ss$/,
          use: [
            global._ENV === 'dev' ? 'style-loader' : MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader',
            'less-loader',
          ]
},
...
// css样式内容首先被less-loader处理，然后是postcss-loader处理，再经过css-loader处理，最后被style-loader或MiniCssExtractPlugin.loader处理。
// 从下往上调用的顺序