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']
    }
  ]
},