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