Webpack高级配置「三」-- 抽离CSS文件并压缩

本地开发环境不需要压缩css,配置保持不变;
生产中压缩css可以优化产出代码，故只在生产环境进行css压缩;

在开发和生产分别配置如下：

1.在生产配置中配置css抽离压缩加载：

抽离css文件：

• 安装分离css插件 mini-css-extract-plugin
• 在plugins中 新增 抽离css文件的 配置

压缩css文件：

• 安装压缩css插件 terser-webpack-plugin、optimize-css-assets-webpack-plugin
• 在optimization中 新增 压缩css 的配置

css加载：

• 在loader中 配置以插件的形式加载

[webpack.prod.js]只展示与css相关配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = smart(webpackCommonConf, {
  mode: 'production',
  module: {
    rules: [
      // 抽离 css
      {
        test: /\.css$/,
        loader: [
          MiniCssExtractPlugin.loader, // 注意，这里不再用 style-loader
          'css-loader',
          'postcss-loader'
        ]
      },
      // 抽离 less --> css
      {
        test: /\.less$/,
        loader: [
          MiniCssExtractPlugin.loader, // 注意，这里不再用 style-loader
          'css-loader',
          'less-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [

    // 抽离 css 文件
    new MiniCssExtractPlugin({
      filename: 'css/main.[contentHash:8].css'
    })
  ],
  optimization: {
    // 压缩 css
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  }
})

2.开发环境配置css加载

[webpack.prod.js]：

module: {
  rules: [
    {
      test: /\.css$/,
      // loader 的执行顺序是：从后往前
      loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
    },
    {
      test: /\.less$/,
      // 增加 'less-loader' ，注意顺序
      loader: ['style-loader', 'css-loader', 'less-loader']
    }
  ]
},