構建其實是工程化、自動化思想在前端開發中的體現，把一系列流程用代碼去實現，讓代碼自動化地執行這一系列複雜的流程。 構建給前端開發注入了更大的活力，解放了我們的生產力。
Webpack 憑藉強大的功能與良好的使用體驗，已經成為目前最流行，社區最活躍的構建工具，是現代 Web 開發必須掌握的技能之一。
背景
在當下的前端環境裏，各種框架和工具層出不窮，比如 React、Vue、Angular 等，極大的提高了我們的開發效率，但是，他們都有一個共同點：源代碼無法直接運行，必須經過轉換之後才可執行。
而轉換代碼的這個過程我們可以稱之為構建，被用來進行構建的工具我們叫做構建工具，而 Webpack 便是其中的佼佼者。
構建工具的常規作用：
- 代碼轉換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等。
- 文件優化：壓縮 JavaScript、CSS、HTML 代碼，壓縮合並圖片等。
- 代碼分割：提取多個頁面的公共代碼、提取首屏不需要執行部分的代碼讓其異步加載。
- 模塊合併：在採用模塊化的項目裏會有很多個模塊和文件，需要構建功能把模塊分類合併成一個文件。
- 自動刷新：監聽本地源代碼的變化，自動重新構建、刷新瀏覽器。
- 代碼校驗：在代碼被提交到倉庫前需要校驗代碼是否符合規範，以及單元測試是否通過。
- 自動發佈：更新完代碼後，自動構建出線上發佈代碼並傳輸給發佈系統。
Webpack 的概念
Webpack 是使用 NodeJs 開發出來的一個構建工具，本質上，它是一個現代 JavaScript 應用程序的靜態模塊打包器（module bundler）。
當 Webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖（dependency graph），其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。
在 Webpack 裏一切文件皆模塊，通過 Loader 轉換文件，通過 Plugin 注入鈎子，最後輸出由多個模塊組合成的文件。
Webpack 專注於構建模塊化項目。借用 Webpack 官網首頁的圖片來看一下它到底是什麼：
一切文件：JavaScript、CSS、SCSS、圖片、模板，在 Webpack 眼中都是一個個模塊，這樣的好處是能清晰地描述出各個模塊之間的依賴關係，以方便 Webpack 對模塊進行組合和打包。 經過 Webpack 的處理，最終會輸出瀏覽器能使用的靜態資源。
Webpack 的基本配置
以下是 Webpack 的基本配置，主要包含了 webpack 的四個核心概念：
- 入口(entry)
- 輸出(output)
- loader
- 插件(plugins)
const path = require('path');
module.exports = {
// 模式配置
mode: "production", // "production" | "development" | "none"
// 入口文件
entry: "./app/entry", // string | object | array
output: {
// webpack 如何輸出結果的相關選項
path: path.resolve(__dirname,
"dist"), // string
},
module: {
// 關於模塊配置
rules: [
// 模塊規則（配置 loader、解析器等選項）
{
test: /\.jsx?$/,
}
]
},
// 插件
plugins: [
// ...
],
}Webpack 的優缺點
優點：
- 專注於處理模塊化的項目，能做到開箱即用一步到位；
- 通過 Plugin 擴展，完整好用又不失靈活；
- 使用場景不僅限於 Web 開發；
- 社區龐大活躍，經常引入緊跟時代發展的新特性，能為大多數場景找到已有的開源擴展；
- 良好的開發體驗。
缺點：
- 只能採用模塊化開發
選擇 Webpack 的原因
Webpack 能成為眾多構建工具中的佼佼者，主要有以下原因：
- 大多數團隊在開發新項目時會採用緊跟時代的技術，這些技術幾乎都會採用“模塊化+新語言+新框架”，Webpack 可以為這些新項目提供一站式的解決方案；
- Webpack 有良好的生態鏈和維護團隊，能提供良好的開發體驗和保證質量；
- Webpack 被全世界的大量 Web 開發者使用和驗證，能找到各個層面所需的教程和經驗分享。
（本文完）
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
大家好！我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關注，希望大家多多指教！
知識與技能並重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！
