前端開發-模組打包工具WebPack
概念
本質上，
webpack
是一個用於現代 JavaScript 應用程式的_靜態模組打包工具_。當 webpack 處理應用程式時，它會在內部構建一個 依賴圖（dependency graph），此依賴圖對應對映到專案所需的每個模組，並生成一個或多個
bundle
。
入口（entry）
入口起點(entry point)
指示 webpack 應該使用哪個模組，來作為構建其內部 依賴圖（dependency graph） 的開始。進入入口起點後，webpack 會找出有哪些模組和庫是入口起點（直接和間接）依賴的。
預設值是 。/src/index。js，但你可以透過在 webpack configuration 中配置 entry 屬性，來指定一個（或多個）不同的入口起點。例如：
webpack.config.js
module。exports = { entry： ‘。/path/to/my/entry/file。js’，}；
輸出（output）
output
屬性告訴 webpack 在哪裡輸出它所建立的
bundle
，以及如何命名這些檔案。主要輸出檔案的預設值是 。/dist/main。js，其他生成檔案預設放置在 。/dist 資料夾中。
你可以透過在配置中指定一個 output 欄位，來配置這些處理過程：
webpack.config.js
const path = require（‘path’）；module。exports = { entry： ‘。/path/to/my/entry/file。js’， output： { path： path。resolve（__dirname， ‘dist’）， filename： ‘my-first-webpack。bundle。js’， }，}；
在上面的示例中，我們透過 output。filename 和 output。path 屬性，來告訴 webpack bundle 的名稱，以及我們想要 bundle 生成（emit）到哪裡。可能你想要了解在程式碼最上面匯入的 path 模組是什麼，它是一個 Node。js 核心模組，用於操作檔案路徑。
loader
webpack 只能理解 JavaScript 和 JSON 檔案，這是 webpack 開箱可用的自帶能力。
loader
讓 webpack 能夠去處理其他型別的檔案，並將它們轉換為有效 模組，以供應用程式使用，以及被新增到依賴圖中。
在更高層面，在 webpack 的配置中，
loader
有兩個屬性：
test 屬性，識別出哪些檔案會被轉換。
use 屬性，定義出在進行轉換時，應該使用哪個 loader。
webpack.config.js
const path = require（‘path’）；module。exports = { output： { filename： ‘my-first-webpack。bundle。js’， }， module： { rules： ［{ test： /\。txt$/， use： ‘raw-loader’ }］， }，}；
以上配置中，對一個單獨的 module 物件定義了 rules 屬性，裡面包含兩個必須屬性：test 和 use。這告訴 webpack 編譯器（compiler） 如下資訊：
外掛（plugin）
loader 用於轉換某些型別的模組，而外掛則可以用於執行範圍更廣的任務。包括：打包最佳化，資源管理，注入環境變數。
webpack.config.js
const HtmlWebpackPlugin = require（‘html-webpack-plugin’）； // 透過 npm 安裝const webpack = require（‘webpack’）； // 用於訪問內建外掛module。exports = { module： { rules： ［{ test： /\。txt$/， use： ‘raw-loader’ }］， }， plugins： ［new HtmlWebpackPlugin（{ template： ‘。/src/index。html’ }）］，}；
在上面的示例中，html-webpack-plugin 為應用程式生成一個 HTML 檔案，並自動注入所有生成的 bundle。
在 webpack 配置中使用外掛是簡單直接的。然而，也有很多值得我們進一步探討的用例。檢視這裡瞭解更多。
模式（mode）
透過選擇 development， production 或 none 之中的一個，來設定 mode 引數，你可以啟用 webpack 內建在相應環境下的最佳化。其預設值為 production。
module。exports = { mode： ‘production’，}；
瀏覽器相容性（browser compatibility）
webpack 支援所有符合 ES5 標準 的瀏覽器（不支援 IE8 及以下版本）。webpack 的 import（） 和 require。ensure（） 需要 Promise。如果你想要支援舊版本瀏覽器，在使用這些表示式之前，還需要 提前載入 polyfill。
環境（environment）
webpack 5 運行於 Node。js v10。13。0+ 的版本
起步
webpack 用於編譯 JavaScript 模組。一旦完成 安裝，你就可以透過 webpack CLI 或 API 與其配合互動。如果你還不熟悉 webpack，請閱讀 核心概念 和 對比，瞭解為什麼要使用 webpack，而不是社群中的其他工具。
基本安裝
首先我們建立一個目錄，初始化 npm，然後 在本地安裝 webpack，接著安裝
webpack-cli
（此工具用於在命令列中執行 webpack）：
mkdir webpack-democd webpack-demonpm init -ynpm install webpack webpack-cli ——save-dev
在整個指南中，我們將使用 diff 塊，來展示對目錄、檔案和程式碼所做的修改。例如：
+ this is a new line you shall copy into your code- and this is a line to be removed from your code and this is a line not to touch。
現在，我們將建立以下目錄結構、檔案和內容：
project
webpack-demo |- package。json+ |- index。html+ |- /src+ |- index。js
src/index.js
function component（） { const element = document。createElement（‘div’）； // lodash（目前透過一個 script 引入）對於執行這一行是必需的 element。innerHTML = _。join（［‘Hello’， ‘webpack’］， ‘ ’）； return element；}document。body。appendChild（component（））；
index.html
<！DOCTYPE html>
我們還需要調整 package。json 檔案，以便確保我們安裝包是 private（私有的），並且移除 main 入口。這可以防止意外發布你的程式碼。
package.json
{ “name”： “webpack-demo”， “version”： “1。0。0”， “description”： “”，- “main”： “index。js”，+ “private”： true， “scripts”： { “test”： “echo \”Error： no test specified\“ && exit 1” }， “keywords”： ［］， “author”： “”， “license”： “ISC”， “devDependencies”： { “webpack”： “^5。4。0”， “webpack-cli”： “^4。2。0” } }
在此示例中，
- +