Webpack(2) — 圖片 與 Json-loader 與 UglifyJS Plugin

webpack

本篇沒有什麼難度,照官網和ruanyf大師做就對了!

Webpack 把任何東西都可以當成模組使用,CSS、Image、json等等。

Ex1: 圖片(image loader)

其實沒有什麼image loader,Webpack主要是使用url-loader與file-loader處理圖片的。

  1. 首先要安裝 url loader 與 file loader。

指令:

$npm install url-loader --save-dev
$npm install file-loader --save-dev
--save-dev : 安裝在專案目錄,代表專案開發時與webpack相依。

2. loader 那編寫上url-loader

url-loader ,這裡示範 limit為 限制最大把10,000 byte(=10k)的圖片轉成data-url base64的儲存形式。(一般建議使用limit=8192就好)

那你一定會問,如果圖檔超過指定的大小限制會怎麼樣?

url loader 在判斷超過大小後,會直接轉用file loader

◆使用 file loader 注意要設定 publicPath :

另外要注意的是,在Webpack.config.js裡,output 的 path 為 設定bundle.js與其他打包好的檔案所放置的目錄,如”Code Splitting分拆程式碼”與使用file loader載入的其他圖檔。但若同時使用file-loader則 “必須” 另外在 “publicPath” 設定為相同目錄`,以便重新指定新路徑,不然 HTML 網頁在執行時,file loader會找不到該圖檔。

3.在main.js 加入require(“./xxxx.jpg”) 讀取圖檔

或是可以改用 Code-Splitting的方式,非同步的讀取圖檔。

4.使用Webpack 整合所有必要模組檔案。

$webpack --display-modules --color

由於 bg.jpg 超過10kB (78kB)所以沒有Bundle起來,而 div-bg1.jpg 因為不到10kB(8.88kB) 所以有被bundle起來。

5.打開index.html網頁,進入F12,可以看到 div-bg1.jpg已變成data-url的形式。

所以 file-loader 做了什麼事呢?

從結果可以看出來

原本的

./bg.jpg (@main.js)

已經被file-loader轉成

./build/img/bg.jpg (@ouput index.html)

build即為 webpack.config.js 的 output.publicPath所設定的目錄。

Ex2: Json-loader

沒錯 Webpack讀取json檔也等同讀取module,不過json經過webpack bundle之後,就失去了非同步讀取的方式,如果你的應用是非同步讀取切記就算使用webpack的非同步讀取方式,如require.ensure也是會被包成1.bundle.js包裝過後的檔案,並非json檔,如下圖,需要真正非同步應用請使用 ajax 方式讀取檔案。因為require.ensure只是再bundle時分析所需要的檔案。

  1. 首先要安裝 json loader

指令:

$npm install json-loader --save-dev
--save-dev : 安裝在專案目錄,代表專案開發時與webpack相依。

2. loader 那編寫上json-loader

3.在main.js 加入require(“./xxxx.jpg”) 讀取圖檔

4.使用Webpack 整合所有必要模組檔案。

$webpack --display-modules --color

5.打開index.html網頁,結果如下。

Ex3: UglifyJS Plugin

用來醜化code,讓人看不懂XD ,直接修改EX2。

  1. 因為會用到Webpack Plugin(外掛),所以要把webpack安裝在專案目錄內。
npm install webpack --save-dev
--save-dev : 代表專案開發時與webpack相依。

2.修改Webpack.config.js

主要是加上 這段

plugins: [
new uglifyJsPlugin({
compress: {
warnings: false
}
})
]

打包時不會特別顯示什麼跟uglify有關的東西

打包的bundle.js會長成這樣

本篇結束囉!

Ref:

https://github.com/ruanyf/webpack-demos

Show your support

Clapping shows how much you appreciated Alpha Orange’s story.