這篇文章的主要內容

簡單介紹 webpack 是什麼。

webpack 是什麼？

問問現在還算流行的 chatGPT

Webpack是一個用於打包、轉換和管理前端資源的工具，能夠將多種類型的文件整合成最佳化的輸出檔案，以優化網頁性能和開發流程。

簡單來說 webpack 是一個用來打包前端部署檔案的工具。

為什麼需要 webpack ?

webpack 之前的前端開發，通常就是一份 html 搭配 css 跟 js ，像這樣。

在這種配置下，隨著專案的規模越來越大，code 會越來越長，在管理跟維護上會越來越困難，webpack 幫我們處理了下面這些問題。

模組化

webpack 把每一份檔案都當作一個個的 module，可以對 module 做處理，或是拆分重複的邏輯
來集中管理方便重複使用。

引入順序

引入第三方套件 CDN 時，有時候會因為套件彼此的相依性，引入的先後順序如果出錯，就會無法使用。比如建立 react 時 react-dom 在 react 前面引入的話就會出錯。

變數衝突

如果在不同的 js 檔裡面有宣告相同的變數會出現變數的衝突，導致檔案無法順利執行。

出現並未使用的程式碼

開發過程常常會嘗試不同的工具或是寫法，但是後面找到其他解決方案時，如果沒有移除那些沒有使用的程式碼，瀏覽器就會花一點時間處理跟解析。

各種提高開發效率的工具

隨著前端技術的發展，也漸漸了出現了很多不同的工具跟語言來提升開發效率跟維護性。

TypeScript -> 讓 JavaScript 具備強型別語言的特點
SASS / SCSS -> 透過在CSS 中撰寫變數、Mixin 等，提高可讀性跟維護性
babel -> 編譯較新的 ECMA Script 語言，讓所有瀏覽器都可以執行

除了上述的幾個以外，還有很多的工具可以提高我們在開發時的效率，但是大部分的工具都還是無法避免需要手動編譯的過程，需要配置相對應的編譯器才可以在瀏覽器上執行，反倒影響了開發的速度。

Webpack 幫我們做了什麼

webpack 提供了前端開發本來不具備的模組化開發，將每一份檔案都視作為獨立的 module，彼此間的變數不會有衝突的問題，另外也透過 import export 的順序，找出每一份模組彼此之間的相依性，藉此確保了檔案的引入順序，避免出現引入順序錯誤的問題。

同時也透過了 tree shaking 的技術移除了沒有作用的程式碼，也會把 code 做壓縮，而且把換行、空格、註解都一併移除，提高解析的效率。

另外在開發的過程中透過適當的配置會幫我們做編譯的動作，比如把 SASS/SCSS 編譯成 css、TypeScript 編譯成 JavaScript，把 JavaScript 新的語法編譯成舊的語法，讓新的 JavaScript 也可以運行在舊的瀏覽器上。

像 webpack 這樣的打包工具已經是前端開發不可或缺的工具，但是 webpack 那複雜的配置跟設定方式也是讓人難以上手。
除了 webpack 以外的打包工具還有 Rollup 跟 Parcel。

下一篇會簡單使用 webpack 來建立一個 TypeScript + react 的開發環境。
如果內容有誤再麻煩大家指教，我會盡快修改。

這個系列的文章會同步更新在我個人的 Medium，歡迎大家來看看 👋👋👋
Medium