鐵人檔案
前端框架五花八門，可是建置工具卻只更新了 2 3 代而已，相較之下要來的穩定多了，這些工具如 webpack, babel 都是我們在現代開發前端時不知不覺之中得去使用到的工具，可是我們真的了解這些工具嗎？現在我們大多都靠著框架提供的基本設定就搞定了這些工具，會不會有一天，我們非得正面面對這些工具呢？比如只要正確的設定好 webpack 你就可以在打包時順便的對圖片做最佳化，還可以做 prerender 來提供更好的 SEO
這系列不只是介紹這些工具的使用方法，還會去探究它們底層的實作原理，以及如何寫個 plugin ，完全客制化這些工具的功能
rollup 的 plugin 要比 webpack 要來的簡單多，另外 rollup 也有提供一個給寫 plugin 用的 utils ，只要安裝： $ ya...
Parcel 跟 webpack 是個很像的 bundler ，同樣可以打包各種類型的檔案，不一樣的是 Parcel 不用設定就可以處理大部份的情況，用來快速建...
這篇的範例程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/parcel-demo 雖然上一...
postcss 可說是相當於 css 的 babel ，可以轉換 css 的語法，同時它也是個 css 的 parser ，被用在像 stylelint 之類的...
在開始前先說一件事， postcss 的 plugin 設計其實有個不小的問題，而為了解決這個問題 postcss 8 大改了這部份的架構，然而大部份的 plu...
vite 是 Vue.js 的作者所做的一個新的 bundler ，如果你有用過應該會知道，它最特別的部份是它在開發時不做打包，而是用原生瀏覽器支援的 es6...
插播一下， webpack 5 出來了 gulp 是個老牌的 task runner ，它就只是執行設定好的工作，設定寫起來其實不難，不過現在前端大家主要還...
要講到 gulp 怎麼運作的就不得不講到 vinyl 跟 Node.js 的 stream vinyl vinyl 是 gulp 用的虛擬的檔案格式，在它的 r...
eslint 是很有名的 linter ，如果有在寫 JavaScript 應該多多少少都會知道，雖然它不該被歸類來這系列的主題「建置工具」中，不過它也算是很常...
這篇的完整的程式可以到 https://github.com/DanSnow/ironman-2020/tree/master/build-tool/pack...
