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

發表於 2019-06-09 更新於 2021-02-21 分類於 Webpack

Google AD

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

Liker 讚賞

這篇文章如果對你有幫助，你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以請我喝一杯咖啡。

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

前言

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

起手式

首先先安裝一個套件

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

使用方法

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

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