526互联

12-webpack20210701-5

发布时间 2023-08-21 00:27:49作者: 影乌

转载请注明 来源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack压缩 CSS 文件

压缩 CSS 文件需要使用到 optimize-css-assets-webpack-plugin插件

一、压缩 css 文件的核心配置

// webpack.config.js webpack的配置文件
// 路径： ./webpack.config.js

//……
//引入optimize-css-assets-webpack-plugin插件
const OptimizeCssAssetsWebpackPlugin = require ('optimize-css-assets-webpack-plugin');

//……

 	// plugins的配置
    plugins: [
        //详细的plugins配置
        
        ……
        
        //压缩 css
        // new OptimizeCssAssetsWebpackPlugin()
    ],

改动有两处

改动1：引入optimize-css-assets-webpack-plugin插件

//引入optimize-css-assets-webpack-plugin插件
const OptimizeCssAssetsWebpackPlugin = require ('optimize-css-assets-webpack-plugin');

改动2：添加plugins的配置项

//压缩 css
// new OptimizeCssAssetsWebpackPlugin()

二、安装插件

//安装optimize-css-assets-webpack-plugin 插件
> npm i optimize-css-assets-webpack-plugin -D

三、运行

> webpack