压缩CSS

CSS体积越小，请求速度也会更快，那么加载速度就快，用户看到效果就更快一些，这样用户体验就会更好，所以在代码上线之前一定要压缩CSS。

目录结构沿用上一节

需要下载的插件

optimize-css-assets-webpack-plugin

npm i optimize-css-assets-webpack-plugin -D

步骤

引入插件const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')使用插件：new OptimizeCssAssetsWebpackPlugin()

默认配置足够，所以不需要修改配置，只需调用即可

配置文件

const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') // 设置node.js环境变量 // process.env.NODE_ENV = 'development' module.exports = { entry: './src/js/index.js', output: { filename: 'js/built.js', path: resolve(__dirname, 'build') }, module: { rules: [{ test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', // 修改loader的配置 { loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ // postcss的插件 require('postcss-preset-env')() ] } } ] }] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }), new MiniCssExtractPlugin({ // 对输出的文件进行重命名 filename: 'css/built.css' }), // 压缩CSS，默认配置足够，所以不需要修改配置，只需调用即可 new OptimizeCssAssetsWebpackPlugin() ], mode: 'development', devServer: { contentBase: resolve(__dirname, 'build'), compress: true, port: 3000, open: true } }

运行webpack/npx webpack-dev-server后查看相应css文件

build->css->built.css

可以看到CSS代码被压缩至一行