企業應用程式資料網格和圖表
webpack
與 webpack 合作感到自豪

入門

Webpack 用於編譯 JavaScript 模組。一旦 安裝，您可以從其 CLI 或 API 與 webpack 互動。如果您仍是 webpack 新手，請閱讀 核心概念 和 此比較，以了解為什麼您可能使用它而不是社群中的其他工具。

基本設定

首先，讓我們建立一個目錄，初始化 npm，在本地安裝 webpack，並安裝 webpack-cli（用於在命令列上執行 webpack 的工具）

mkdir webpack-demo
cd webpack-demo
npm init -y
npm 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
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js

function component() {
  const element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</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": "MIT",
   "devDependencies": {
     "webpack": "^5.38.1",
     "webpack-cli": "^4.7.2"
   }
 }

在此範例中，<script> 標籤之間有隱含的相依性。我們的 index.js 檔案依賴於在執行前已將 lodash 包含在頁面中。這是因為 index.js 從未明確宣告需要 lodash；它假設存在全域變數 _。

使用這種方式管理 JavaScript 專案會產生問題

  • 無法立即看出腳本是否依賴於外部函式庫。
  • 如果相依項遺失或包含順序錯誤，應用程式將無法正常運作。
  • 如果包含但未使用的相依項，瀏覽器將被迫下載不必要的程式碼。

讓我們改用 webpack 來管理這些腳本。

建立套件

首先，我們將稍微調整我們的目錄結構，將「原始碼」(./src) 與「發行碼」(./dist) 分開。我們將撰寫和編輯「原始碼」。「發行碼」是我們建置程序的最小化和最佳化「輸出」，最終會載入瀏覽器中。請依下列方式調整目錄結構

project

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

若要將 lodash 相依項與 index.js 捆綁，我們需要在本地安裝函式庫

npm install --save lodash

現在，讓我們在我們的腳本中匯入lodash

src/index.js

+import _ from 'lodash';
+
 function component() {
   const element = document.createElement('div');

-  // Lodash, currently included via a script, is required for this line to work
+  // Lodash, now imported by this script
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

   return element;
 }

 document.body.appendChild(component());

現在，由於我們將會打包我們的腳本，我們必須更新我們的index.html檔案。讓我們移除 lodash <script>，因為我們現在import它，並修改其他<script>標籤以載入套件，而不是原始的./src檔案

dist/index.html

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.17.20"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
 </html>

在此設定中，index.js明確要求lodash存在，並將它繫結為_（沒有全域範圍污染）。藉由說明模組需要的依賴項，webpack 可以使用此資訊來建立依賴項圖表。然後，它使用圖表來產生最佳化的套件，其中腳本將會按照正確的順序執行。

話說回來，讓我們執行npx webpack，它會將我們的腳本src/index.js視為進入點，並會產生dist/main.js作為輸出。npx指令，它與 Node 8.2/npm 5.2.0 或更高版本一起提供，執行我們一開始安裝的 webpack 套件的 webpack 二進位檔（./node_modules/.bin/webpack）

$ npx webpack
[webpack-cli] Compilation finished
asset main.js 69.3 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 1000 bytes 5 modules
cacheable modules 530 KiB
  ./src/index.js 257 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 1851 ms

在您的瀏覽器中從dist目錄開啟index.html，如果一切順利，您應該會看到以下文字：'Hello webpack'。

模組

import 和 export 陳述式已在 ES2015 中標準化。目前大多數瀏覽器都支援這些陳述式，但有些瀏覽器無法辨識新的語法。不過別擔心，webpack 預設支援這些陳述式。

事實上，webpack 會「轉譯」程式碼，讓舊版瀏覽器也能執行。如果你檢查 dist/main.js，你可能會發現 webpack 如何執行此動作，這非常巧妙！除了 import 和 export 之外，webpack 也支援其他各種模組語法，請參閱 模組 API 以取得更多資訊。

請注意，webpack 除了 import 和 export 陳述式之外，不會變更任何程式碼。如果你使用其他 ES2015 功能，請務必透過 webpack 的 載入器系統 使用轉譯器，例如 Babel。

使用組態

從版本 4 開始，webpack 不需要任何組態，但大多數專案需要更複雜的設定，這就是 webpack 支援 組態檔案 的原因。這比在終端機中手動輸入大量指令有效率得多，所以我們來建立一個

project

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

現在，讓我們再次執行建置，但使用新的組態檔案

$ npx webpack --config webpack.config.js
[webpack-cli] Compilation finished
asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 1000 bytes 5 modules
cacheable modules 530 KiB
  ./src/index.js 257 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 1934 ms

組態檔允許比 CLI 使用更靈活的設定。我們可以指定載入器規則、外掛程式、解析選項和許多其他增強功能。請參閱組態文件以了解更多資訊。

NPM 腳本

由於從 CLI 執行 webpack 的本機副本並不好玩，我們可以設定一個小捷徑。讓我們透過新增一個npm 腳本來調整我們的 package.json

package.json

 {
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
   "private": true,
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "webpack": "^5.4.0",
     "webpack-cli": "^4.2.0"
   },
   "dependencies": {
     "lodash": "^4.17.20"
   }
 }

現在，可以使用 npm run build 指令取代我們先前使用的 npx 指令。請注意，在 scripts 中，我們可以透過名稱來參照本機安裝的 npm 套件，就像我們使用 npx 所做的那樣。這個慣例是大多數基於 npm 的專案中的標準，因為它允許所有貢獻者使用同一組常用腳本。

現在執行下列指令，看看您的腳本別名是否運作

$ npm run build

...

[webpack-cli] Compilation finished
asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 1000 bytes 5 modules
cacheable modules 530 KiB
  ./src/index.js 257 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 1940 ms

結論

現在您已經建立了一個基本的組建，您應該繼續閱讀下一個指南資產管理以瞭解如何使用 webpack 管理影像和字型等資產。在這個階段，您的專案應該看起來像這樣

project

webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
  |- main.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

如果您想進一步了解 webpack 的設計，您可以查看 基本概念 和 組態 頁面。此外，API 區段深入探討 webpack 提供的各種介面。

編輯此頁面·列印此頁面
« 上一頁
指南
下一頁 »
資產管理

24 貢獻者

bebrawcntanglijunchrisVillanuevajohnstewsimon04aaronangTheDutchCodersudarsangpVanguard90chenxsanEugeneHlushkoATGardnerayvarotbjarkiztomaszeSpiral90210byzykwizardofhogwartsmyshovanshumanvd3lmsnitin315Etheryen