webpack如何抽离css文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
moduel.exports = {
    /* ...... */
  module: {
      rules: [
      {
          // css的抽离
        test: /\.css$/,
        loader: [
          // 这里不使用style-css
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-plugin'
        ]
      },
      {
          // less的抽离
        test: /\.less$/,
        loader: [
            MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
          'postcss-loader'
        ]
      }
    ],
    /* ..... */
    plugins: [
        /* .... */
      // 抽离css文件
      new MiniCssExtractPlugin({
          filename: 'css/main.[contentHash:8].css'
      })
    ],
    optimization: {
        // 压缩css
      minimzer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
    }
  }
}