N4.1_Webpack 是什麼及為什麼要用它？

本篇為閱讀 webpack 新手教學之淺談模組化與 snowpack 的筆記兼一點點心得

最終目標：理解下列問題並回答

Q1. 為什麼很多專案（例如說 React）在部署前都要先 build？這個步驟在幹嘛你知道嗎？

A1. 原來 build 是 Webpack 打包的指令，打包完以後才可以被瀏覽器執行。

Q2. 你知道 require/module.exports 與 import/export 的差別嗎？

A2. 前者是 Node.js 裡面的 CommonJS 的語法；後者是 ES6 的模組化語法。
前者必須經過轉譯才能在瀏覽器上面執行，後者可以在瀏覽器上面直接執行。

Q3. 你知道 import 與 export 這兩個語法在瀏覽器上面不是隨便就能使用嗎？

A3. 可以用更改檔名，如 js => mjs 或者是用 babel 轉譯。

Q4. 你知道為什麼要用 webpack 嗎？

A4. 即使現在瀏覽器有 ES6 的 import 與 export，但因支援度不好及要引入其他模組化套件來實作專案，而其他套件又不被瀏覽器支援，所以用 Webpack 打包轉換，才能執行在瀏覽器上面。

Q5. 你知道 webpack 為什麼要有 loader 嗎？

A5. loader 感覺像是電池或者是開關，Webpack 引進的模組是一台台機器，要有 loader 才可以運作。

參考原文，才發現原來 loader 預設是載入 JavaScript啊...

模組化：很像是一個獨立的工具或功能

Node.js 的模組

在 Node.js 裡面，自己做一個工具然後發表，可以用 module.exports

如果要引入任何的工具（模組），就用 require

上述的這套模組機制，並不在 JavaScript 的規範裡面，而在CommonJS 裡。

其他的模組化標準有像是 seaJS、module JS、requireJS 等等，而 CommonJS 剛好被 Node.js 採用。

因為瀏覽器不支援上面說的「引入模組化」那些東西，因此我們需要 Webpack。

如果沒有 Webpack，有其他方法引入模組嗎？

以 CommonJS 為例...筆記未完成

感覺像是寫兩個函式把功能包起來，接著想辦法把它們接起來輸出這樣？

** 原文「手動加入 CommonJS 支援」這一段暫時無法完全理解**

開始介紹 webpack

在開發時，建議使用 'development' 模式，比較快也看得懂，最後再改回 'production'，然後打包完成專案。

ES6 有標準模組化 import 與 export 了，那還需要用 Webpack 這個工具嗎？

簡答：還是要，主因是支援度不夠好，再加上引入其他套件的相容性問題

要在 Node.js 用 import 與 export 的話，可以改檔名或用 babel 轉換，詳情參考 原文 「ES6 的標準化模組」的段落

Q1. 為什麼要用 webpack？

A1. 即使現在瀏覽器有 ES6 的 import 與 export，但因支援度不好及要引入其他模組化套件來實作專案，而其他套件又不被瀏覽器支援，所以用 Webpack 打包轉換，才能執行在瀏覽器上面。

Q2. 不用 webpack 的話會怎樣？

A2. 就要花很多時間去做應該做的事情，Webpack 有點像是一個超級管家，可以交代他去做任何事，例如洗衣服、煮飯等等。但管家本人不可能真的去做這兩件事，洗衣服交給洗衣機；煮飯交給電鍋，洗衣機跟電鍋就是類似 loader 的角色。

Q3. webpack 與 ES6 定義的標準模組有什麼差別？

A3. 語法不同：前者用 require/module.exports；後者用
import/export

來源不同：前者是外部支援的工具；後者是瀏覽器原生的

用法不同：前者要安裝跟設定；後者要在 script 標籤加 type 且用伺服器開啟

Q4. webpack 的最基礎使用（寫設定檔與打包 JS）

A4. 簡單來說就是安裝 => 設定 => 打包

小結：

透過閱讀並筆記，我理解了「什麼是 Webpack」、「為什麼要用它？」及「模組化是什麼？」

不太懂的地方像是「不用 Webpack 自己引入模組化要怎麼寫程式碼代替」那一段，以及「Webpack 怎麼使用」，所以我就直接去使用它應該就能理解了。

不懂的地方暫時先放著。

後記：

原文的參考連結 什麼？！我們竟然有 3 個標準？ - 你有聽過 CommonJS 嗎？(Day9)，裡面有提到「CommonJS」 和 「AMD」，可以參考 歡迎來到大分叉時代 - AMD 與 CommonJS 的發展。

另外，其中有一段提到 Babel （英文的巴別塔），原來 Babel 取名有這個涵義，是嗎？

想起以前讀過的 巴别塔之犬，對語言有興趣的可以一讀這個蠻有趣的小說。