面试题：Webpack 处理 CSS 兼容性在多环境下的配置优化

1. 针对不同环境的配置区分

开发环境与生产环境：通过 webpack-merge 库来合并基础配置和不同环境的特定配置。在基础配置中定义通用的 CSS 处理规则，在开发环境配置（如 webpack.dev.js）中注重开发体验，例如开启 source-map 便于调试；在生产环境配置（如 webpack.prod.js）中着重优化，如压缩 CSS 等。

// webpack.common.js
const path = require('path');
const MiniCssExtractPlugin = require('mini - css - extract - plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
};

// webpack.dev.js
const merge = require('webpack - merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline - source - map'
});

// webpack.prod.js
const merge = require('webpack - merge');
const common = require('./webpack.common.js');
const OptimizeCSSAssetsPlugin = require('optimize - css - assets - plugin');

module.exports = merge(common, {
    mode: 'production',
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({})
        ]
    }
});

2. CSS 兼容性处理

PostCSS：使用 postcss - loader 配合 autoprefixer 插件自动添加浏览器前缀。在 postcss.config.js 中配置目标浏览器版本。

// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')({
            browsers: ['last 2 versions', '> 1%', 'ie >= 11']
        })
    ]
};

// webpack 配置中添加 postcss - loader
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: () => [
                                require('autoprefixer')
                            ]
                        }
                    }
                ]
            }
        ]
    }
};

CSS 预处理器：如果使用如 Sass、Less 等预处理器，安装相应的 loader 并在 Webpack 配置中配置，例如 sass - loader、less - loader 等，同时可以在预处理器配置中设置兼容性相关参数。

3. 优化打包效率

代码拆分：利用 splitChunks 插件对 CSS 进行代码拆分，将公共 CSS 提取出来，避免重复打包。

module.exports = {
    optimization: {
        splitChunks: {
            cacheGroups: {
                styles: {
                    name:'styles',
                    test: /\.css$/,
                    chunks: 'all',
                    enforce: true
                }
            }
        }
    }
};

压缩 CSS：在生产环境中使用 OptimizeCSSAssetsPlugin 压缩 CSS 文件，减小文件体积。

const OptimizeCSSAssetsPlugin = require('optimize - css - assets - plugin');

module.exports = {
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({})
        ]
    }
};

缓存：使用 cache-loader 缓存 CSS 处理结果，在后续构建中提高打包速度。

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'cache-loader',
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: () => [
                                require('autoprefixer')
                            ]
                        }
                    }
                ]
            }
        ]
    }
};

面试题：Webpack 处理 CSS 兼容性在多环境下的配置优化

知识考点

面试题答案

1. 针对不同环境的配置区分

2. CSS 兼容性处理

3. 优化打包效率