1.单独分离CSS

默认在处理 css 文件时，由 style-loader 将 css-loader 处理好的 css 代码挂载到 style 标签上。

如果想要将 css 文件单独提取成一个文件，则可以使用 MiniCssExtractPlugin 插件。

npm i mini-css-extract-plugin -d

需要注意的是：使用该插件后，在 loader 中无需使用 style-loader，而是采用该插件提供的 loader。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'static/css/[hash:10]_[name].css'
        }),
    ]
};

2.处理不同浏览器的CSS兼容性

可以借助 postcss-loader | autoprefixer 这两个工具来处理兼容性问题。

autoprefixer 是 postcss 的一个插件，用于自动添加浏览器前缀到CSS属性。

需要注意的是： postcss-loader 需要在 css-loader 之前。

npm i postcss-loader autoprefixer -d

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin(),
    ]
};

然后需要在根目录，新建 postcss.config.js 来配置 PostCSS 插件，该文件同样使用 commonJS 规范。

module.exports = {
    plugins: [
        require('autoprefixer'),
    ]
};

然后需要配置为哪些浏览器来进行适配，我们可以在根目录新建 .browserslistrc 文件。

# 要支持最新浏览器版本的适配
last 1 version
# 适配百分之99的浏览器
> 1%

3.压缩CSS

npm install css-minimizer-webpack-plugin -d

然后我们需要在 optimization.minimizer<Array> 配置项中进行实例化该插件，该配置项用于优化相关的插件。

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
    optimization: {
        // 默认只在生产开启优化, 如果设置成true则在开发也优化。
        minimize: true,
        minimizer: [
            new CssMinimizerPlugin({
                // 该配置项移除了代码中的所有注释
                minimizerOptions: {
                    preset: [
                        "default",
                        {
                            discardComments: { removeAll: true },
                        },
                    ],
                },
            }),
        ]
    }
};