webpack配置css代碼分割和css壓縮

開始，按照我的webpack分模塊文章配置好后(mini-css-extract-plugin不支持代碼hmr熱更新，所以只在生產模式進行配置)，開始下面的配置

yarn add mini-css-extract-plugin css-minimizer-webpack-plugin

配置css分離出單獨的文件

//文件名:webpack.prod.js
const { merge } = require('webpack-merge');
const ComConfig = require('./webpack.common');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const prodConfig = {
    mode: 'production',
    devtool: 'cheap-module-source-map',
    module: {
        rules: [
            {
                test: /\.([sc|c])ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',   //直接引入的css
            chunkFilename: '[id].css',  //間接引入的css
        }),
    ]
}
module.exports = merge(prodConfig, ComConfig)

配置css壓縮

//文件名:webpack.prod.js
const { merge } = require('webpack-merge');

const ComConfig = require('./webpack.common');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');    //css壓縮插件
const prodConfig = {
    mode: 'production',
    devtool: 'cheap-module-source-map',
    module: {
        rules: [
            {
                test: /\.([sc|c])ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css',
        }),
    ],
    optimization: {
        minimizer: [
            // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
            // `...`
            new CssMinimizerPlugin(),
        ],
    },
}
module.exports = merge(prodConfig, ComConfig)

如果開啟了tree shaking,package.json中的sideEffects不能配置為false，需要將css文件加上，不然代碼不生效,tree shaking 意思是引入的模塊必須使用才會打包，css看不出來使用，只引入，所以需要將css忽略

"sideEffects": [
    "*.css"
  ],

　總結：webpack.dev.js使用style-loader，webpack.prod.js使用MiniCssExtractPlugin.loader 代替,這個loader不支持熱更新(hmr),開發時會耗時，所以開發環境不配置，生產環境配置