CSS 抽离和压缩

抽离和压缩CSS只适用于生产环境打包，样式较多的情况下使用。

// 生产环境配置文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(), // 压缩
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({  // 抽离
      filename: './css/[name].[hash:8].css'
    })
  ]
}

// 公用配置文件
const resolveApp = require('./paths')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { merge } = require('webpack-merge')
const TerserPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 导入其它的配置
const prodConfig = require('./webpack.prod')
const devConfig = require('./webpack.dev')
// 定义对象保存 base 配置信息
const commonConfig = (isProduction) => {
  return {
    optimization: {
      minimizer: [
        new TerserPlugin({
          extractComments: false
        })
      ],
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            isProduction ? MiniCssExtractPlugin.loader : 'style-loader',  // 根据 env参数使用 loader
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                esModule: false
              }
            },
            'postcss-loader'
          ]
        },
      ]
    },
    ]
  }
}
module.exports = (env) => {
  const isProduction = env.production
  process.env.NODE_ENV = isProduction ? 'production' : 'development'
  // 依据当前的打包模式来合并配置
  const config = isProduction ? prodConfig : devConfig
  const mergeConfig = merge(commonConfig(isProduction), config)
  return mergeConfig
}