在【拆分】和【壓縮】css代碼之前锈锤，首先要配置 loader 處理不同的 css 資源球化，因?yàn)?webpack 沒有默認(rèn)可處理 css 資源的規(guī)則墩虹，具體可參考這一篇 webpack處理css/less資源
style-loader
loader 處理不同類型的 css 資源后通過 style-loader 將css代碼添加到 html 文件中签夭，但此時(shí) css 代碼并沒有生成單獨(dú)的文件尝艘，而是被編譯到了 js 文件中。
所以在 html 頁面中炕吸，css 代碼是通過 style 標(biāo)簽創(chuàng)建的伐憾，而不是直接引入 css 資源地址。
MiniCssExtractPlugin
當(dāng) css 文件較多時(shí)赫模，全部打包至 js 文件树肃，會(huì)使得 js 文件體積很大，將 css 代碼抽離到單獨(dú)的文件中能減少單個(gè)文件的加載壓力嘴瓤。可通過 MiniCssExtractPlugin 實(shí)現(xiàn)莉钙。
安裝 mini-css-extract-plugin, 定義 plugin廓脆，并用 MiniCssExtractPlugin.loader 替換 style-loader
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// 省略其余配置
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'], // 省略其它loader
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: './css/[name].css',
chunkFilename: './css/[name].css',
}),
],
};
編譯后的 css 將兩個(gè) css 文件代碼合到了一起
css 資源被引入到 html 頁面中
CssMinimizerWebpackPlugin
MiniCssExtractPlugin 只對(duì) css 代碼進(jìn)行了拆分，壓縮需要使用到 CssMinimizerWebpackPlugin磁玉。
安裝 css-minimizer-webpack-plugin 后停忿，在 optimization 屬性中配置。
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
// 其它配置省略
optimization: {
minimizer: [new CssMinimizerWebpackPlugin({})],
},
};
可以看到壓縮后css代碼和源代碼區(qū)別不大蚊伞，這是因?yàn)槿绻薷倪x擇器和屬性名稱席赂，很難再與原來的元素對(duì)應(yīng)，會(huì)需要增加復(fù)雜的處理映射關(guān)系的邏輯處理时迫，所以對(duì) css 的壓縮主要是去除空格的操作颅停。
總結(jié)
- style-loader 用于創(chuàng)建 style 標(biāo)簽，將 css 代碼添加到 html 頁面中
- MiniCssExtractPlugin 會(huì)將處理好的 css 代碼編譯到新的 css 文件中掠拳，并在 html 文件中引入
- CssMinimizerWebpackPlugin 壓縮 css 文件中的代碼
以上就是拆分和壓縮css代碼的介紹癞揉， 更多有關(guān) webpack 的內(nèi)容可以參考我其它的博文，持續(xù)更新中~
