EP-12-關於-Webpack-學習這件小事之 CSS 壓縮

前言

這一篇文章應該要在前面的章節撰寫的,後來我發現我忘記 CSS 壓縮的套件要加入,所以這邊紀錄一下。

起手式

首先先安裝一個套件

1
npm install --save-dev optimize-css-assets-webpack-plugin

使用方法

由於上一篇我們已經將 prod 與 dev 給切出來,所以我們只需要打開 webpack.config.prod.js 來做調整

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const merge = require('webpack-merge');
const config = require('./webpack.config.js');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const path = require('path');

module.exports = merge(config, {
mode: 'production',
devtool: 'source-map',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.[hash].js'
},
module: {
rules: [
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
},
}]
},
plugins: [
new CleanWebpackPlugin(),
new OptimizeCssAssetsWebpackPlugin(),
],
});

接下來只需要執行 npm run prod,就可以看到 CSS 被壓縮囉

已壓縮的 CSS

沒加入 optimize-css-assets-webpack-plugin 之前的 CSS

還沒壓縮的 CSS

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下拍手,過程你只需要登入,如果你願意按個讚,對於創作者來講是一個莫大的鼓勵與支持。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ