前言
這一篇文章應該要在前面的章節撰寫的,後來我發現我忘記 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 被壓縮囉

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