抽离和压缩CSS

抽离css：

npm install mini-css-extract-plugin --save-dev

压缩css：

css-minimizer-webpack-plugin --save-dev

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

在多数情况下，我们也可以进行压缩CSS，以便在生产环境中节省加载时间，同时还 可以将CSS文件抽离成一个单独的文件。实现这个功能，需要 mini-css-extractplugin 这个插件来帮忙。安装插件：

npm install mini-css-extract-plugin --save-dev

本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文 件，并且支持 CSS 和 SourceMaps 的按需加载。 本插件基于 webpack v5 的新特性构建，

并且需要 webpack 5 才能正常工作。 之后将 loader 与 plugin 添加到你的 webpack 配置文件中：

const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
]
}


--------------------------------------------------------------------
//...
const MiniCssExtractPlugin = require("mini-css-extractplugin")
module.exports = {
//...
// 配置资源文件
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
//...
],
},
//...
}

这时， link 标签已经生成出来了，把我们打包好的 main.css 文件加载进来。我们 发现， main.css 文件被打包抽离到 dist 根目录下，能否将其打包到一个单独的文 件夹里呢？修改配置文件：

plugins: [
new MiniCssExtractPlugin({
filename: 'styles/[contenthash].css'
})
]

压缩css：

css-minimizer-webpack-plugin --save-dev

const CssMinimizerPlugin = require('css-minimizer-webpackplugin')
module.exports = {
// 生产模式
mode: 'production',
// 优化配置
optimization: {
minimizer: [
new CssMinimizerPlugin(),
],
},
}