###### tags: `學期 3 front-end` `webinar` # Webpack 操作工作坊 ## 報名 Webpack 操作工作坊！ ### Webpack 操作工作坊 <div style="background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold; max-width:500px; width:fit-content;"> 日期與時間：7/14 (二) 19:30 - 21:00 <br> 登記參加連結：<a href="https://zoom.us/j/83984867142" target="_blank">https://zoom.us/j/83984867142</a> </div> 當專案變得複雜以後，我們需要將專案「模組化」，以便組織管理。要進行模組化時，就需要像 Webpack 這種「打包工具 (module bundler)」。 Webpack 可以把分拆成不同模組的專案，轉換成「瀏覽器看得懂的內容」，方便我們部署網站。 <div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/13377/ExportedContentImage_00.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/13377/ExportedContentImage_00.png"></a></div> 除此之外，Webpack 還有各式各樣的功能，也可以做到程式碼優化。 Webpack 通常已經整合在前端框架的內部，單獨應用的場景不多，但瞭解 Webpack 非常有助於瞭解框架的底層運作，幫助你對網站開發建立更深入的認知。 在本次工作坊中，我們會以專案【網紅廣告平台】為例，讓你具體觀察模組化的前後差異。 工作坊內容包括： - Webpack 與模組化觀念釐清 - 案例：模組化前後對照（[before](https://github.com/ALPHACamp/webpack-part1-before) <> [after](https://github.com/ALPHACamp/webpack-part1-after)) - 從零打造 Webpack 專案 在參加工作坊前，請先閱讀瀏覽以下參考材料，初步瞭解基本觀念。 ---- ### Webpack 簡介 #### 為什麼需要打包？ Webpack 的功能是「打包專案」，而為什麼需要打包？最主要的原因是我們需要將專案「模組化」。 簡單來說，可以想像若像是 Facebook 這樣複雜的網頁，若它只用一隻 JavaScript 寫到底，那可能程式碼已經幾百萬行了。因此為了方便團隊協作與維護專案，現今的網頁專案大多會採用模組化的方式，將各個功能的 JavaScript 程式碼切成許多模組（module），方便組織與管理。 若你對於「模組化」這件事不了解，建議可以參考<a href="https://blog.huli.tw/2020/01/21/webpack-newbie-tutorial/" target="_blank">這篇胡立的文章</a>了解脈絡。 為了讓專案更容易開發，你可能會需要這樣做： * 模組化：將 JavaScript 按照不同功能切成許多檔案。 * 在前端中使用其他人開發好的 NPM 套件。 * 使用 ES6 以上許多方便的語法。 * 使用 SCSS、less 這些 CSS 預處理器方便管理 CSS。 * 將各種類型的檔案（圖片、CSS）引入 JavaScript 中。 基於以上諸多原因，我們需要一個工具來幫忙處理這些麻煩事，而這個工具就是 Webpack。 #### 什麼是 Webpack？ Webpack 是一個模組打包工具（module bundler），它會分析專案結構，尋找各個 JavaScript 模組，並分析是否有瀏覽器不能直接使用的語法（ES6-ES11 語法、TypeScript 等），甚至檢查專案中是否有引入 CSS、圖片檔等，將他們轉換並打包在一起，最後產出瀏覽器可以識別的檔案，方便我們部署到線上。 #### Webpack 的用途 Webpack 對模組又做了更廣泛的定義，除了所有的 JavaScript 模組外，像是 CSS、image 之類的資源也可以一起打包。 甚至我們可以透過 NPM 安裝許多第三方的套件，像是 Bootstrap、Font Awesome 等等，直接在專案中引入使用。 另外，Webpack 在打包時，還可以做一些設定來轉譯瀏覽器看不懂的語法。像是可以做 Babel 設定來轉譯 JavaScript ES6-ES11 的語法，或者轉換 SCSS 或 less 這些 CSS 預處理器語法。 Webpack 也可以在打包的過程中透過一些工具來做到程式碼優化的工作（minify、uglify）。 而現今一些前端框架的 CLI 工具像是 create-react-app 或 Vue CLI，都整合了 Webpack 將專案的打包工作做好通用的預設設定，簡化了許多開發者這部分的負擔。學習 Webpack 並瞭解它是如何運作的，也將能讓我們更有彈性的調整這些預設設定。 #### Webpack 基本觀念 在我們實際動手操作 Webpack 前，先來了解幾個 Webpack 的基本觀念。 <div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/13378/ExportedContentImage_01.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/13378/ExportedContentImage_01.png"></a></div> 首先我們要了解 Webpack 的工作方式，從上圖中可以看到會由一個進入點開始，從這個檔案開始找到其他的相關檔案（dependency），透過 loader 來處理這些檔案，最後打包成一個或多個的輸出檔案。 ##### Entry point Webpack 預設的進入點是 src/index.js，可以隨專案調整，也可以設定多個進入點。 ##### Output 輸出指的是 Webpack 在 build 完之後產生的靜態檔結果，通常被放在 dist/ 底下。 這些被輸出的 JavaScript 檔案也可被稱為 bundle。 ##### Loader 前面提到 Webpack 可以打包的東西不只是 JS，也可以打包其他諸如 CSS、圖片、文件等資源，而這些就需要藉由 Loader 來處理，只要將這些種類的檔案透過 loader 轉為 module，就能讓專案方便的直接引入。 ##### Plugin Plugin 是第三方的擴充套件，可以補強一些 Webpack 的功能，舉例像是有些 plugin 可以拿來 uglify、minify、移除未使用的 CSS（PurgeCSS）等，更多的 plugin 可以參考 <a href="https://github.com/webpack-contrib/awesome-webpack#webpack-plugins" target="_blank">awesome-webpack 的 plugin list</a>。 ##### Mode Webpack 有兩種模式分別是 development 與 production，兩者的差別是 production 模式預設會將 JavaScript 程式碼做 minify 和其他優化。 --- ## Webpack 操作工作坊 -- 2020/7 月班會後精華 <div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://player.vimeo.com/video/" frameborder="0" allowfullscreen></iframe></div> <div style="line-height:16px;"></div> 當專案變得複雜以後，我們需要將專案「模組化」，以便組織管理。要進行模組化時，就需要像 Webpack 這種「打包工具 (module bundler)」。 Webpack 可以把分拆成不同模組的專案，轉換成「瀏覽器看得懂的內容」，方便我們部署網站。 <div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/13377/ExportedContentImage_00.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/13377/ExportedContentImage_00.png"></a></div> 除此之外，Webpack 還有各式各樣的功能，也可以做到程式碼優化。 Webpack 通常已經整合在前端框架的內部，單獨應用的場景不多，但瞭解 Webpack 非常有助於瞭解框架的底層運作，幫助你對網站開發建立更深入的認知。 在本次工作坊中，我們會以專案【網紅廣告平台】為例，讓你具體觀察模組化的前後差異。 工作坊內容包括： - Webpack 與模組化觀念釐清 - 案例：模組化前後對照（[before](https://github.com/ALPHACamp/webpack-part1-before) <> [after](https://github.com/ALPHACamp/webpack-part1-after)) - 從零打造 Webpack 專案 ---- ### Webpack 簡介 #### 為什麼需要打包？ Webpack 的功能是「打包專案」，而為什麼需要打包？最主要的原因是我們需要將專案「模組化」。 簡單來說，可以想像若像是 Facebook 這樣複雜的網頁，若它只用一隻 JavaScript 寫到底，那可能程式碼已經幾百萬行了。因此為了方便團隊協作與維護專案，現今的網頁專案大多會採用模組化的方式，將各個功能的 JavaScript 程式碼切成許多模組（module），方便組織與管理。 若你對於「模組化」這件事不了解，建議可以參考<a href="https://blog.huli.tw/2020/01/21/webpack-newbie-tutorial/" target="_blank">這篇胡立的文章</a>了解脈絡。 為了讓專案更容易開發，你可能會需要這樣做： * 模組化：將 JavaScript 按照不同功能切成許多檔案。 * 在前端中使用其他人開發好的 NPM 套件。 * 使用 ES6 以上許多方便的語法。 * 使用 SCSS、less 這些 CSS 預處理器方便管理 CSS。 * 將各種類型的檔案（圖片、CSS）引入 JavaScript 中。 基於以上諸多原因，我們需要一個工具來幫忙處理這些麻煩事，而這個工具就是 Webpack。 #### 什麼是 Webpack？ Webpack 是一個模組打包工具（module bundler），它會分析專案結構，尋找各個 JavaScript 模組，並分析是否有瀏覽器不能直接使用的語法（ES6-ES11 語法、TypeScript 等），甚至檢查專案中是否有引入 CSS、圖片檔等，將他們轉換並打包在一起，最後產出瀏覽器可以識別的檔案，方便我們部署到線上。 #### Webpack 的用途 Webpack 對模組又做了更廣泛的定義，除了所有的 JavaScript 模組外，像是 CSS、image 之類的資源也可以一起打包。 甚至我們可以透過 NPM 安裝許多第三方的套件，像是 Bootstrap、Font Awesome 等等，直接在專案中引入使用。 另外，Webpack 在打包時，還可以做一些設定來轉譯瀏覽器看不懂的語法。像是可以做 Babel 設定來轉譯 JavaScript ES6-ES11 的語法，或者轉換 SCSS 或 less 這些 CSS 預處理器語法。 Webpack 也可以在打包的過程中透過一些工具來做到程式碼優化的工作（minify、uglify）。 而現今一些前端框架的 CLI 工具像是 create-react-app 或 Vue CLI，都整合了 Webpack 將專案的打包工作做好通用的預設設定，簡化了許多開發者這部分的負擔。學習 Webpack 並瞭解它是如何運作的，也將能讓我們更有彈性的調整這些預設設定。 #### Webpack 基本觀念 在我們實際動手操作 Webpack 前，先來了解幾個 Webpack 的基本觀念。 <div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/13378/ExportedContentImage_01.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/13378/ExportedContentImage_01.png"></a></div> 首先我們要了解 Webpack 的工作方式，從上圖中可以看到會由一個進入點開始，從這個檔案開始找到其他的相關檔案（dependency），透過 loader 來處理這些檔案，最後打包成一個或多個的輸出檔案。 ##### Entry point Webpack 預設的進入點是 src/index.js，可以隨專案調整，也可以設定多個進入點。 ##### Output 輸出指的是 Webpack 在 build 完之後產生的靜態檔結果，通常被放在 dist/ 底下。 這些被輸出的 JavaScript 檔案也可被稱為 bundle。 ##### Loader 前面提到 Webpack 可以打包的東西不只是 JS，也可以打包其他諸如 CSS、圖片、文件等資源，而這些就需要藉由 Loader 來處理，只要將這些種類的檔案透過 loader 轉為 module，就能讓專案方便的直接引入。 ##### Plugin Plugin 是第三方的擴充套件，可以補強一些 Webpack 的功能，舉例像是有些 plugin 可以拿來 uglify、minify、移除未使用的 CSS（PurgeCSS）等，更多的 plugin 可以參考 <a href="https://github.com/webpack-contrib/awesome-webpack#webpack-plugins" target="_blank">awesome-webpack 的 plugin list</a>。 ##### Mode Webpack 有兩種模式分別是 development 與 production，兩者的差別是 production 模式預設會將 JavaScript 程式碼做 minify 和其他優化。 -- #### 工作坊參考資料 ##### 投影片 <div style="position: relative;width:100%;height:0;padding-bottom: 55%;"><iframe style="position:absolute;top:0;left:0;width:90%;height:90%" src="https://docs.google.com/presentation/d/e/2PACX-1vQnqC4urfjv745CdaIuggtOc8OdKBnf0PBicJMkkzRSlCWxQIQhFh1AIy3W44vc_QcaZoUciTxZACeK/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></div>