【五分鐘學前端】Webpack、PostCSS、Babel、Sass到底是什麼?

布魯斯前端
May 13, 2021

--

在新加坡懷念高雄的我,圖來源:高雄市政府

前言

只要是有接觸過前端專案的大家,肯定都用過這三種東西,只是在用的時候,你可能也不知道自己正在用它們:

Webpack、PostCSS、Babel、Sass

然後因為最近跟HISKIO合作開了這堂課:

布魯斯的 Tailwind CSS + Bootstrap 5 框架雙刀流​

大家願意支持的話,到時候上架可以讓我斂個財,用這個連結買,我拿到的分潤比較高,感謝啦XD

回歸正題,因為這樣剛好寫個文章,帶大家理解什麼是Webpack、PostCSS、Babel、Sass。

不過這篇文章不會有太多複雜的技術內容,主要是想讓各位能「認識」自己已經在使用的工具,有機會再來寫個技術篇。

就讓我們開始吧!

來快速上手囉Yeah!

來看看Webpack

相信對初學者來說,都一定會有這種感覺:

只要用到TailwindCSS、Bootstrap或React、Vue這些JavaScript&CSS框架,一定會遇到Webpack的一些問題。

雖然平常都在用的工具都牽扯到Webpack,但卻又不太明白它到底是什麼東西,這到底是尛?

簡單說,Webpack就是一個「前端打包工具」,大前端時代的基石。

什麼是打包工具呢?請聽我娓娓道來….

瀏覽器根本就看不懂我們平常在使用的工具

首先我們要知道一點,瀏覽器實際上只看的懂這三種東西:

HTML、JavaScript、CSS

所以不管是什麼工具或框架,最後都要讓自己專案的程式碼,變成最「純粹」的JavaScript跟CSS,讓瀏覽器知道你在寫什麼。

舉些例子:

  1. 寫TailwindCSS會有一堆專屬的語法寫在CSS檔案裡。
  2. 寫Bootstrap可能會用到Sass。
  3. 寫React會有JSX在JavaScript檔裡面。

但瀏覽器壓根就無法看懂這些東西,所以這時候,打包救星「Webpack」就來了!

Webpack這個東西,其實就是幫助我們把方便我們開發的工具們,在寫完後打包成瀏覽器看得懂的那最「純粹」的東西:JavaScript、CSS。

https://webpack.js.org/

但Webpack本身是沒辦法直接做到轉換的,它需要搭配一些工具才能來實現轉換的功能。

所以這時候我們就需要PostCSSBabel,這兩個神奇的轉換工具。

簡單說你可以想像成,PostCSS跟Babel是兩位門神,PostCSS是負責轉換CSS,Babel是負責轉換JavaScript,而Webpack是他們的老大哥,負責指派跟管理任務的角色。

所以大致上Webpack就是這樣的一種東西,可以說只要是前端專案肯定離不開像Webpack這種東西的打包工具。

有興趣想知道更詳細的朋友可以去看看官方的文檔,有機會再來做一個技術的配置教學給大家!

文檔:https://webpack.js.org/concepts/

來看看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裡面,然後他會幫我們編譯成以下的樣子,讓更多瀏覽器兼容。

private語法的轉換

左邊是原始碼,右邊是編譯轉換後的樣子,是不是很酷!

所以基本上我們前端開發也是離不開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

--

--