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

前言

接下來將會講解該如何打包圖片,但是打包圖片這邊有許多的雷點,在自己的友站就有提到「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

1
2
3
4
5
6
7
8
9
10
11
12
13
{
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 的部分

1
2
3
4
5
6
rules: [{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
},
}]

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

1
npm install --save-dev html-loader
1
2
3
4
5
6
7
8
9
rules: [{
test: /\.html$/,
use: [ {
loader: 'html-loader',
options: {
minimize: true
}
}],
}]

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

將原本

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

調整為

1
2
3
4
{
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 打包圖片

0%