如何在WebPack生产环境中禁用CSS压缩？

要实现你的需求——JS正常编译并压缩，SCSS编译后保留未压缩格式，只需调整WebPack的优化规则，明确区分两类文件的处理逻辑：

修改后的完整配置 #

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const getPublicPath = require('./compiler/publicPath');
const { entry, outputFolder, publicFolder, watch, proxyTarget, ignore } = require('./compiler/config');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');
// WebPack5自带TerserPlugin，WebPack4需手动安装：npm install terser-webpack-plugin --save-dev
const TerserPlugin = require('terser-webpack-plugin');

module.exports = (env, argv) => {
    const dev = argv.mode === 'development';
    const isProduction = argv.mode === 'production';

    return {
        watch: true,
        entry: entry,
        output: {
            path: path.resolve(outputFolder),
            publicPath: getPublicPath(publicFolder),
            filename: '[name].js'
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: '[name].css',
            }),
            new IgnoreEmitPlugin(ignore),
            new VueLoaderPlugin()
        ],
        // 关键配置：只压缩JS，禁用CSS压缩
        optimization: {
            minimize: isProduction, // 仅生产模式启用压缩
            minimizer: [
                // 仅添加JS压缩插件，不引入任何CSS压缩插件
                new TerserPlugin({
                    terserOptions: {
                        // 可选：保留注释，便于后续调试
                        format: {
                            comments: true,
                        },
                    },
                    extractComments: false, // 不将注释提取到单独文件
                }),
            ],
        },
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js'
            }
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.vue$/,
                    use: 'vue-loader'
                },
                {
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                        { loader: MiniCssExtractPlugin.loader, options: { hmr: dev } },
                        { loader: 'css-loader', options: { sourceMap: dev } },
                        { loader: 'resolve-url-loader', options: { sourceMap: dev } },
                        { loader: 'sass-loader', options: { sourceMap: true, sourceMapContents: dev } }
                    ]
                },
                {
                    test: /\.(gif|png|jpe?g|svg)$/i,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[path][name].[ext]'
                            }
                        },
                        {
                            loader: 'image-webpack-loader',
                            options: {
                                disable: dev,
                            },
                        },
                    ],
                },
                {
                    test: /\.(otf|eot|ttf|woff|woff2?|ico|mp4|webm|htc)$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[path][name].[ext]',
                            }
                        }
                    ]
                }
            ]
        }
    }
};

关键调整说明 #

1. 引入TerserPlugin：专门负责JS压缩，确保生产模式下JS被压缩，开发模式保持原样
2. 优化规则配置：
   • 仅在生产模式下开启minimize开关
   • minimizer数组只保留TerserPlugin，不添加任何CSS压缩插件（比如css-minimizer-webpack-plugin），这样SCSS编译后的CSS会保留完整的换行、缩进，方便其他开发者修改和查看变更
3. 清理无用代码：删除原配置中未使用的minify_css变量，逻辑更清晰

验证方法 #

执行生产模式构建命令：webpack --mode production，然后检查输出文件：

• JS文件：已被压缩
• CSS文件：保持未压缩的格式化状态

内容的提问来源于stack exchange，提问作者David Essery