EP 9 - 關於 Webpack 學習這件小事之打包圖片

發表於 2019-06-08 分類於 Webpack

Google AD

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

Liker 讚賞

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

｜

接下來將會講解該如何打包圖片，但是打包圖片這邊有許多的雷點，在自己的友站就有提到「SCSS 可能會編譯失敗」，但是由於自己是採用 PUG Template，做法又有點不太一樣，所以這邊就來記錄一下吧

前言

起手式

首先這邊必須安裝兩個套件，分別為 file-loader、image-webpack-loader、html-loader這幾個套件，首先

image-webpack-loader 用途是針對圖片做壓縮處理，否則每一個圖片幾 MB 起跳那怎麼行呢?

file-loader 呢?簡單來講就是拿來打包圖片用~

html-loader 針對 HTML 的載入圖片做處理

反正來實做一下就對了

1 2	npm install --save-dev file-loader html-loader image-webpack-loader

設置 webpack.config.js

接下來依照官方 file-loader 的說明我們必須新增 rules

{
  test: /\.(png|jpe?g|gif)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        publicPath: '../image',
        outputPath: './image',
      },
    },
  ],
},

稍微說明一下 options 參數

name:
- [name]: 圖片原本名稱
- [ext]: 原本圖片副檔名
publicPath: 注意這個選項會影響 SCSS & HTML 打包圖片讀取路徑
outputPath: 圖片輸出路徑

接下來還要設置 image-webpack-loader 的部分

rules: [{
  loader: 'image-webpack-loader',
  options: {
    bypassOnDebug: true,
  },
}]

最後是針對 HTML 部分做處理，如果是使用純粹的 HTML 方式撰寫還需要安裝 html-loader 套件，如果沒有設置這個插件，那麼在 HTML 中就會看不到圖片唷~

1	npm install --save-dev html-loader

rules: [{
  test: /\.html$/,
  use: [ {
    loader: 'html-loader',
    options: {
      minimize: true
    }
  }],
}]

但是這邊由於我是使用 PUG Template，所以要調整別的地方

將原本

{
  test: /\.pug$/,
  loader: ['raw-loader', 'pug-html-loader']
},

調整為

{
  test: /\.pug$/,
  loader: ['html-loader', 'pug-html-loader']
},

然後原本的 raw-loader 套件就可以移除囉~

1	npm uninstall raw-loader

嘗試打包圖片

新增完成之後我們開始嘗試撰寫加入圖片吧!我故意找了 unsplash 上的圖片(約 5 MB)來測試

unsplash

首先是 PUG 部分

PUG

再來是 SCSS 部分

SCSS

接下來先開啟 Web Server 看圖片是否正常出來

Web Server

好哩，這樣子就成功打包圖片了~

文獻參考

CodingWife 寇丁人妻日安

No.8 使用 Webpack 打包圖片