webpack 用于編譯 JavaScript 模塊，運行 webpack 5 的 Node.js 最低版本是 10.13.0 (LTS)。

命令行：

npm install webpack webpack-cli --save-dev

webpack-cli 的作用：用于在命令行中運行 webpack

SAP Spartacus 的 devDependencies 中就包含該依賴。

創建一個新項目：

index.js 的源代碼：

function component() {const element = document.createElement('div');// lodash（目前通過一個 script 引入）對于執行這一行是必需的element.innerHTML = _.join(['Hello', 'webpack'], ' ');return element;}document.body.appendChild(component());

index.html 源代碼：

<meta charset="utf-8"><title>起步</title>

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",}}

private:true 讓這個包私有化，可以避免誤發布代碼。

上述代碼有一個隱含的問題，在 index.js 里使用了變量 _, 該變量通過 index.html 的 script 標簽導入lodash@4.17.20 ，但是 index.js 并未顯式聲明它需要這個變量。

使用這種方式去管理 JavaScript 項目會有一些問題：

• 無法直接體現，腳本的執行依賴于外部庫。

• 如果依賴不存在，或者引入順序錯誤，應用程序將無法正常運行。

• 如果依賴被引入但是并沒有使用，瀏覽器將被迫下載無用代碼。

我們可以使用 webpack 來避免上述三個問題。

首先，把 index.html 放到 dist 文件夾內。

本地安裝 lodash：

npm install --save lodash

在安裝一個 package，而此 package 要打包到生產環境 bundle 中時，你應該使用 npm install --save。如果你在安裝一個用于開發環境的 package 時（例如，linter, 測試庫等），你應該使用 npm install --save-dev

修改 index.js, 顯式引入 _:

現在我們可以在 index.html 里將導入 lodash 的 script 刪除，因為我們已經在 index.js 里通過 import，顯式導入了：

執行 npx webpack，會將我們的腳本 src/index.js 作為 入口起點，也會自動生成 dist/main.js 文件作為 輸出。

Node 8.2/npm 5.2.0 以上版本提供的 npx 命令，可以運行在初次安裝的 webpack package 中的 webpack 二進制文件（即 ./node_modules/.bin/webpack）：

至此這個最簡單的 webpack 例子就完成了。

總結

以上是生活随笔為你收集整理的最简单的 Webpack Hello World 例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。