是 Ray 不是 Array

整理這些技術筆記真的很花時間,如果你願意 關閉 Adblock 支持我,我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你!ヽ(・∀・)ノ

Advertisement
2019-06-09 Webpack

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

整理這些技術筆記真的很花時間,如果你願意 關閉 Adblock 支持我,我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你!ヽ(・∀・)ノ

Advertisement

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間,
也許你可以請我喝杯咖啡,讓我繼續當個不是 Array 的 Ray ☕

buymeacoffee | line | portaly

Terminal

分享這篇文章

留言

© 2025 Ray. All rights reserved.

Powered by Ray Theme