本文共 2049 字，大约阅读时间需要 6 分钟。

Webpack CSS 提取与优化配置指南

一、安装依赖

在项目根目录下运行以下命令安装所需插件：

npm install -D mini-css-extract-pluginnpm install -D optimize-css-assets-webpack-plugin

二、Webpack 配置

在 webpack.prod.js 文件中添加以下配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')module.exports = {    // ... 其他 webpack 配置    plugins: [        new MiniCssExtractPlugin({            filename: '[name].css',            chunkFilename: '[name].chunk.css'        }),        new OptimizeCssAssetsWebpackPlugin({            optimization: {                minimizer: [                    new OptimizeCssAssetsWebpackPlugin()                ]            }        })    ]}

三、CSS 处理规则

修改 webpack.config.js 中的 CSS 加载器配置：

module.exports = {    module: {        rules: [            {                test: /\.css$/,                use: [                    MiniCssExtractPlugin.loader,                    'css-loader',                    'postcss-loader'                ]            },            {                test: /\.scss$/,                use: [                    MiniCssExtractPlugin.loader,                    {                        loader: 'css-loader',                        options: {                            importLoaders: 2,                            modules: true                        }                    },                    'sass-loader',                    'postcss-loader'                ]            }        ]    }}

四、CSS 资产优化

启用 optimize-css-assets-webpack-plugin 后，CSS 资产将被压缩合并：

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

五、示例 CSS 文件

style1.css

body {    background: red;}

style2.css

body {    font-size: 25px;}

合并后效果

body {    background: red;    font-size: 25px;}

六、小贴士

通过以上配置，您可以轻松实现 CSS 提取与优化，提升项目性能和构建效率。

转载地址：http://gqko.baihongyu.com/