CodingWife 寇丁人妻日安

【Webpack】打包圖片與壓縮

2018-03-23

新手從無到有,初探 webpack 的心得。

打包圖片與壓縮的介紹。

版本:webpack 4.1.1

新增src/img/logo.png,並在 src/app.scss 裡面載入背景圖片
background: url('./img/logo.png') 0 0 no-repeat;
執行之後會報錯,因此我們要加裝file-loader

Sass 載入圖片

file-loader

$ npm install --save-dev file-loader

在專案下安裝。

module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
}
}

更改webpack.config.js,執行後有效,但發現圖檔名為 hash 值,因此我們更改option

test: /\.(gif|png|jpe?g|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/'
}
},
  • name:採用 source 檔名
  • ext:副檔名
  • outputPath:輸出檔案資料夾

Html 載入圖片

$ npm install --save-dev html-loader

這時候又發現沒有辦法在 html 載入圖片,因為缺少一個在 html 中處理圖片的 loader,因此用上述指令安裝。

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

新增一個 loader,更改webpack.config.js設定。

壓縮圖片

$ npm install image-webpack-loader --save-dev

安裝image-webpack-loader

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

更改webpack.config.js裡面file-loader的設定。

$ ls -lh src/img
$ ls -lh dist/img

輸入指令可以查看圖片大小的落差,有些圖片太小會比較沒有感覺。

另外如果要在 js 檔使用圖片,則須在 js 內引入import img from './img/logo.png';

Tags: Webpack