前言
只要是有接觸過前端專案的大家，肯定都用過這三種東西，只是在用的時候，你可能也不知道自己正在用它們：
Webpack、PostCSS、Babel、Sass
然後因為最近跟HISKIO合作開了這堂課：
「布魯斯的 Tailwind CSS + Bootstrap 5 框架雙刀流」
大家願意支持的話，到時候上架可以讓我斂個財，用這個連結買，我拿到的分潤比較高，感謝啦ＸＤ
回歸正題，因為這樣剛好寫個文章，帶大家理解什麼是Webpack、PostCSS、Babel、Sass。
不過這篇文章不會有太多複雜的技術內容，主要是想讓各位能「認識」自己已經在使用的工具，有機會再來寫個技術篇。
就讓我們開始吧！
來看看Webpack
相信對初學者來說，都一定會有這種感覺：
只要用到TailwindCSS、Bootstrap或React、Vue這些JavaScript＆CSS框架，一定會遇到Webpack的一些問題。
雖然平常都在用的工具都牽扯到Webpack，但卻又不太明白它到底是什麼東西，這到底是尛？
簡單說，Webpack就是一個「前端打包工具」，大前端時代的基石。
什麼是打包工具呢？請聽我娓娓道來….
瀏覽器根本就看不懂我們平常在使用的工具
首先我們要知道一點，瀏覽器實際上只看的懂這三種東西：
HTML、JavaScript、CSS
所以不管是什麼工具或框架，最後都要讓自己專案的程式碼，變成最「純粹」的JavaScript跟CSS，讓瀏覽器知道你在寫什麼。
舉些例子：
- 寫TailwindCSS會有一堆專屬的語法寫在CSS檔案裡。
- 寫Bootstrap可能會用到Sass。
- 寫React會有JSX在JavaScript檔裡面。
但瀏覽器壓根就無法看懂這些東西，所以這時候，打包救星「Webpack」就來了！
Webpack這個東西，其實就是幫助我們把方便我們開發的工具們，在寫完後打包成瀏覽器看得懂的那最「純粹」的東西：JavaScript、CSS。
但Webpack本身是沒辦法直接做到轉換的，它需要搭配一些工具才能來實現轉換的功能。
所以這時候我們就需要PostCSS跟Babel，這兩個神奇的轉換工具。
簡單說你可以想像成，PostCSS跟Babel是兩位門神，PostCSS是負責轉換CSS，Babel是負責轉換JavaScript，而Webpack是他們的老大哥，負責指派跟管理任務的角色。
所以大致上Webpack就是這樣的一種東西，可以說只要是前端專案肯定離不開像Webpack這種東西的打包工具。
有興趣想知道更詳細的朋友可以去看看官方的文檔，有機會再來做一個技術的配置教學給大家！
來看看PostCSS
剛剛在上面有提到這個東西，沒錯他就是用來轉換CSS的門神之一，「PostCSS」。
PostCSS是個給Webpack或其他打包工具來搭配的一種工具。
簡單說就是透過一些PostCSS生態系底下的JavaScript小工具，來幫助你的專案做到各種神奇的CSS轉換。
Autoprefixer
舉個最常用的插件之一，Autoprefixer，它是個神奇的JavaScript小工具，透過Webpack+PostCSS打包後可以幫你把寫好的CSS檔案「自動」加上各種瀏覽器的前綴！
// 轉換前...
.example {
display: grid;
transition: all .5s;
}// 用Autoprefixer轉換後...
.example {
display: -ms-grid;
display: grid;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
其他當然還有很多各種不一樣的插件，像是壓縮CSS、整合@import等等的插件，有了這些神器，都可以幫助我們更有效率的開發CSS！
PostCSS文檔：https://postcss.org/
來看看Babel
Babel其實就跟剛剛的PostCSS很像，是轉換JavaScript的門神。
Use next generation JavaScript, today.
他最主要在做的事情，就是幫助你編譯各種現代化的JavaScript語法，然後可以兼容各種瀏覽器版本。
這其中就要歸功Babel裡的Presets跟各種Plugins。
比如像是底下的範例，如果我配置好相關設定，我寫了JavaScript最新的private語法在class裡面，然後他會幫我們編譯成以下的樣子，讓更多瀏覽器兼容。
左邊是原始碼，右邊是編譯轉換後的樣子，是不是很酷！
所以基本上我們前端開發也是離不開Babel的幫助，有興趣的可以去官方網站看看更多的內容！
Babel文檔：https://babeljs.io/
來看看Sass
最後就是我們的Sass了，Sass本身是一個CSS的預處理器，什麼是預處理器呢？
簡單說就是，我們寫CSS原本都是建立.css檔案，但是在寫Sass，我們需要建立的是.scss檔案。
我們可以在.scss檔案裡寫類似JavaScript的控制語法，然後再用這個工具轉換成純CSS檔案讓瀏覽器看得懂我們在寫什麼。
這樣的好處是可以讓我們開發CSS更有效率，比如像是類似JavaScript的function寫法：
從上面的截圖可以看到，我們在開發的時候，假如有個樣式需要重複寫好幾次，那我就可以包裝成一個function然後到處調用，像共用JavsScript邏輯一樣去共用CSS的樣式。
當然，你也可以使用Webpack跟PostCSS的插件來幫助編譯專案的.scss檔案。
如果大家想學習更多Sass的基礎知識，除了看看官方文檔，我也推薦去看這個Youtuber的影片，可以幫助你快速入門Sass！
Sass文檔：https://sass-lang.com/guide
快速入門Sass：https://www.youtube.com/watch?v=nu5mdN2JIwM&ab_channel=TraversyMedia
結尾
以上就是對Webpack、PostCSS、Babel、Sass的基本介紹。
這篇文章主要是想帶大家理解平常在用，但卻不熟悉的工具們，有機會的話再做個更深入的技術教學帶大家配置這些工具！
希望這篇文章能幫助大家快速理解Webpack、PostCSS、Babel、Sass到底是什麼東西。
想持續關注我的話
- 去Medium追蹤給他按下去～！
- 去Facebook粉專按按讚～！
- 去Youtube頻道訂閱，每週三都直播聊聊大家想問的問題～！
- 加入我創的Line社群，群組目前有2000多人，可以一起進來交流分享經驗跟技術。
- Line社群點我加入：https://reurl.cc/V3WjGZ
