沒耐性的 webpack 新手半路跳上車

Javascript 令開發者愛恨交織， 一直以來我都很抗拒全心投入， 只盡量用最簡單的方式拿它來滿足我 畫圖的需求 而已。 過去這學期為了教學需要， 終於認真爬文了解一下 js 的幾個 bundlers， 最後決定採用 webpack。 本文基本上是把 Valentino Gagliardi 的教學文 消化後用自己的小程式實作並重新整理後的心得。

改推 2022/7 的這一篇： 為新手寫的， 每一句都可以讀得懂的最精簡 webpack 設定檔。 也請參考： Writing Javascript without a build system]

Webpack (或其他類似的 Browserify 、 Grunt 、 Gulp 等等打包工具) 主要有幾大功能：

1. 簡化原始碼， 把 html 裡面引用 css、 script、 img 等等敘述通通都省下來， 並且統一由 .js 原始碼裡面的 import 指令來處理。 ("萬物皆模組")
2. 處理相依套件， 通通抓回本地一起打包。
3. 順便把程式設計師偏好的 (較高階的) 各種不同口味 js 語法 轉譯 (transpile) 成為弱弱舊舊的瀏覽器也可以理解的基本 js 語法。

大推一定要先讀 iT 邦幫忙鐵人賽的簡介文 的 「核心概念」、 「解決了什麼問題」、 「總結」 三節， 然後邊照著本文做、 對細節有疑問再回去讀其他幾節。 本文標題都說好沒耐性了， 那就略過建立專案的流程怎麼樣？ 請直接拿我的專案 (不到 80 列的程式) 用四個 npm 指令走完 webpack 開發流程：

# 假設你已安裝 git 與 npm 套件
git clone https://github.com/ckhung/ciafb.git
cd ciafb/
npm i
npm i webpack-dev-server
npm run dev
npm start

途中會遇到 「moderate severity vulnerability」 之類的警告， 可以先忽略， 因為 那是系統設計的問題， 我們無力處理。 第三句 npm i 其實是 npm install 的意思。 npm 會查看 package.json 設定檔裡面的 dependencies 欄位， 把 終端用戶 所需要的套件 (還有遞迴地找出他們的相依套件) 通通抓回來放在 node_modules/ 底下。 第四句 npm i webpack-dev-server 安裝 webpack 以及它專用的網頁伺服器。 (對， 沒有要用 apache2 或 nginx) 這個網頁伺服器使用 port 8080， 這樣才可以呈現你的程式碼。 以上兩句只需要做一次。

npm 看到第五句， 又再度查看 package.json 裡面的 scripts.dev 欄位， 決定執行 webpack --mode development 。 於是 webpack 便會根據 webpack.config.js 裡面的設定， 把 src/ 目錄裡面的原始碼捏一捏揉一揉、 把成果丟到 dist/ 目錄裡面。

同樣地， 第六句促使 npm 查看 package.json 並執行 webpack serve --open 'firefox'。 火狐會跳出一個新分頁， 等呀等， 等好久， 最後終於看到一張圖和一個表格。 這是我拿 CIA World Factbook 的資料畫出來的散點圖。

現在開一個終端機新分頁， 避開當初啟用 npm start 的那個分頁， 開始小改一下 src/index.js 。 我曾把 npm start 丟到背景， 並且在同一個分頁用 vim 編輯程式， 結果螢幕一直被 npm start 的訊息打亂 -- 因為只要你在 vim 或其他編輯器裡修改存檔， npm 就會自動偵測到， 並且自動啟動 webpack 的捏揉程序、 自動更新瀏覽器的畫面。

以上就是 webpack 半路上車的工作流程。 每次重開機後只需要跑 npm run dev 跟 npm start 這兩句， 剩下的時間只要專注在編輯器裡寫程式就好了。

* * * * *

那如果想要從零開始建立一個專案呢？ 搜尋到這篇長度適中的： 從無到有建立 webpack 設定檔 以及適合耐心讀者的長文 Webpack 初學者教學課程； 但欠缺耐性的我其實並沒有認真讀過 :-) 以下是我自己參考 Valentino 教學文實驗過程得到的一些零碎心得。

package.json 裡面的 dependencies 跟 devDependencies 當然不是手動填進去的。 開發過程中每次下 npm i pqr 指令的時候， npm 就會自動把 pqr 套件記錄到 dependencies 裡面去； 下 npm i xyz --save-dev 的時候， npm 則會自動把 xyz 套件記錄到 devDependencies 去 -- 這些是 開發者 才需要用到的套件， 例如幫 webpack 處理各種檔案格式的模組。 其中 asset 模組 可以處理很多種格式， 方便！

程式碼本身有哪些地方需要改變呢？ 就只有兩處： (1) html 檔變得乾淨很多， 不需要一堆 script/css/img 等等 tags (2) 這些通通改以 import 的方式寫在 js 檔最前面就好。 但是需要 npm i 及 import 的套件名稱， 可能跟手工撰寫時的不太一樣。 例如想要用 plotly， 就要搜尋 「webpack plotly」， 找到 官網文件， 得知可以抓 plotly.js-basic-dist-min 套件來用。

不過除錯過程並不愉快。 最早遇到一個看不懂的錯誤訊息， 搜尋半天不得要領， 最後把 package.json 裡面的 "webpack serve --open 'Firefox'" 改成 "webpack serve --open 'firefox'" 才解決。 還有， 編譯過後放在 dist/ 底下的 js 檔完全無法讀， 所以在 firefox console 裡面也很難除錯。 可能我漏學了很多 npm/webpack 的相關技巧吧。 總之我的心得就是： 陽春 js 比 npm/webpack 簡單、 python 比 js 又簡單很多。