webpack学习---生产模式--css压缩

压缩css  需要npm下载  css-minimizer-webpack-plugin

                const {resolve} = require('path');
                const HtmlWebpackPlugin = require('html-webpack-plugin');
                const MiniCssExtractPlugin = require('mini-css-extract-plugin');

                //引入压缩css插件
                const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");


                process.env.NODE_ENV = 'production';

                module.exports = {
                entry: './src/js/index.js',
                output: {
                    filename: 'js/built.js',
                    path: resolve(__dirname, 'build')
                },
                module: {
                    rules: [
                    {
                        test: /\.css$/,
                        use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                            postcssOptions: {
                                plugins: [
                                [
                                    "postcss-preset-env"
                                ],
                                ],
                            },
                            },
                        }
                        ]
                    }
                    ]
                },

                optimization: {
                    //设置压缩css插件
                    minimizer: [
                    // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
                    // `...`,
                    new CssMinimizerPlugin(),
                    ],
                    //默认是在生产环境才会压缩代码,设置为true则开发环境开启压缩代码
                    minimize: true
                },

                plugins: [
                    new HtmlWebpackPlugin({
                    template: './src/index.html'
                    }),
                    new MiniCssExtractPlugin({
                    filename: 'css/built.css'
                    }),

                ],
                mode: 'development'
                };