前些年工作主力還集中在客製化 WordPress 佈景主題開發的時候，就常常被前端程式的開發環境給搞得暈頭轉向，如果只是做些畫面的樣式調整可以直接把 CSS 或 JS 貼在 HTML 裡面就能解決，現在也有很多外掛可以透過視覺化介面來修改樣式，更不用說還有像是 Elementor 這樣的編輯器可用。
但客製化佈景主題的案件都會由設計師產出設計稿，再交由我這邊進行前端程式開發與 WordPress 後端的整合，雖然現在回過頭來看大部分的版型應該都能用 Elementor 來搞定，但我試過幾次後還是喜歡寫程式做網頁的感覺，對我來說要用滑鼠拖拉一堆介面還不如用鍵盤打字來得有效率的多。
早期在做的時候很單純，就是一行一行的把 HTML/CSS/JS 寫出來，然後為了提升開發速度與效率，持續導入新工具、新語法，像是：
- 把 HTML 換成 Pug，簡化標籤的寫法同時還能引入拆分後的檔案，甚至還能用變數與迴圈
- 把 CSS 換成 SCSS，支援巢狀寫法、變數、迴圈等等
- 把 JS 換成 ES6，減少 jQuery 的依賴採用瀏覽器原生支援的 API
當用這些工具寫完程式後必須要把他們轉換回原始的語法，當然這樣的大工程不可能由人工來處理，因此打包程式就是專門處理這些工作，它可以把 SCSS 輸出成 CSS、把 Pug 輸出成 HTML，除此之外它還可以做檔案的壓縮、加密、合併等一堆有的沒的功能，背後運作靠的是裝在電腦裡面的 Node.js 來處理。
我最喜歡打包程式的其中一項功能就是 BroswerSync，它可以偵測當程式碼有所變動時自動重新整理瀏覽器中的頁面，省下打完程式碼按下儲存後切換視窗去重整頁面的時間。打包程式市面上有非常多款，而且全都是免費的，最早我接觸到的是 Gulp，後起之秀 Parcel 打包速度超快而且完全不需要設定，最近一個專案用的是 esbuild，以及我用過幾次後就很不想再碰它的 Webpack。
Webpack 的設定很複雜，操作邏輯跟以前用過的打包工具完全不同，但它是撰寫 React.js 建議的打包程式，而 React.js 是 WordPress 區塊編輯器的框架，而 WordPress 提供的區塊開發工具 @wordpress/create-block 也是採用 Webpack 打包，因此如果想要開發 WordPress 區塊 Webpack 是跑不掉的。
前陣子花了許多時間在研究該如何讓自己寫好的外掛整合 Webpack，因為是已經寫好的東西所以無法採用 WordPress 官方提供的工具，只能從零開始導入，但導入過程一直碰壁，在尋找解答的過程中無意間發現救星： wpack.io
WordPress 無痛導入 Webpack
wpack.io 是由 Swashata Ghosh 所開發的開源工具，專門協助 WordPress 開發者將 Webpack 導入既有的佈景主題或外掛，實測過後發現它有以下幾個優點：
一、接近零配置的設定
輸入安裝指令後它會透過幾個問題來引導基本設定，包含專案名稱、打包輸出的路徑等等，基本上就是一路 Enter 按下去，完成後再安裝他們提供的 Composer 套件來引入打包後的檔案，如果你需要跟我一樣喜歡 BroswerSync 的功能，再多設定本機網址的 Proxy 即可：
安裝 Composer 套件來引入打包後的檔案：
$ composer require wpackio/enqueue就能用下面的方法來載入 JS 檔：
$enqueue = new \WPackio\Enqueue( 'appName', 'dist', '1.0.0', 'plugin', PLUGIN_PATH );
$assets = $enqueue->enqueue( 'app', 'main' );設定 JS 的進入點需要到 wpackio.project.js 裡面去指定，如果沒有設定的話會出錯：
設定 BrowserSync 的 Proxy 網址，也就是你本機環境的 WordPress 所在位置，要小心 Port 不要跟其他服務衝到，萬一無法成功開啟把 3000 換成其他數字即可：
二、可自選需要的工具
在使用指令安裝的當下，wpack.io 就會主動詢問你需要配置哪些工具，包含的選項有以下五種：React、Flowtype、Typescript、Sass/SCSS、Less，有需要用到的話再安裝即可：
三、可彈性擴充 Webpack 規則
如果你對於 Webpack 有一定熟悉程度的話，在 wpackio.project.js 裡面都還可以擴充 Webpack 的原生語法，譬如說如果你想要增加 svg-loader 或是 babel 的支援都沒問題：
四、自動產出外掛安裝檔
wpack.io 提供了一個 archive 指令來打包成給使用者安裝的外掛 zip 壓縮檔，在 wpackio.project.js 裡面可以設定輸出的路徑以及要打包進去的檔案或目錄：
這邊要小心 packageDirPath 的雷，因為我在測試的時候是希望把壓縮檔放在外掛的根目錄，所以我把 Path 設定成 「/」，結果在打包前它會先確認目標路徑是否有存在的檔案，有的話就先會先清除既有檔案後再來執行打包動作，我一開始不曉得就直接衝了，結果一不小心就把整個外掛的所有檔案給刪除了…
就這樣，我誤砍了努力開發兩個月的 Side Project，我很想說幸好我有備份，但天殺的剛好就只有這個專案沒備份到，然後換了新電腦後也還沒做 Time Machine，就這樣兩個月的努力一切歸零，我上了非常痛非常痛的一課…
我覺得 wpack.io 除了讓我不用從零開始配置 Webpack 環境外，更大的收穫是可以間接認識目前前端開發所運用的各種工具，它提供了我一個認識前端開發工具的入門，就跟當年學 WordPress 而認識 PHP 一樣，接下來我會把它運用在區塊編輯器的開發上，甚至是整合 WooCommerce Block，有更多心得我再把它分享出來～
wpack.io 的完整文件可以參考這邊：https://wpack.io/guides/getting-started/
