摘要：通過使用，或等方案，可以獲得更加可控的環境。使用它來管理項目依賴。前者安裝并寫入字段，而后者則寫入。先安裝在中使用配置完成后，嘗試以下操作運行構建項目。運行進入構建目錄。本地依賴項也適用于持續集成環境。

原文鏈接：https://survivejs.com/webpack...
翻譯計劃：https://segmentfault.com/a/11...

在開始之前，請確保你使用的是 Node 的最新版本。至少是最新的 LTS（長期支持）版本，本書的配置基于 LTS 版本所寫，你的終端需要有 node 和 npm 命令，Yarn 也是一個不錯的選擇，也適用于本教程。

通過使用 Docker，Vagrant 或 nvm 等方案，可以獲得更加可控的環境。Vagrant 可以為團隊中每個開發人員提供統一的環境，但它因依賴于虛擬機，性能稍處劣勢。

T> 本書的完整配置可在 GitHub 上找到。

首先，你應該為項目創建一個目錄并在那里新建 package.json。 npm 使用它來管理項目依賴。以下是基本命令：

mkdir webpack-demo
cd webpack-demo
npm init -y # -y generates *package.json*, skip for more control

生成 package.json 后，你可以手動對其進一步更改。官方文檔更詳細地解釋了 package.json選項。

T> 你可以在 ~/.npmrc 中設置 npm init 的默認值。

T> 這是使用 Git 進行版本控制的絕佳機會。你可以為每個步驟/每一章節創建一個 commit，這樣你可以輕松做到回滾。

T> 本書的例子使用 Prettier 進行格式化。使用選項為 "trailingComma": "es5", 和`"printWidth": 68，這樣可以使 diff 看起來更舒服，更適合頁面展示。

即使可以全局安裝 webpack（npm install webpack -g），最好還是將它作為項目的依賴項來維護，以避免出現因為不同版本帶來的意外問題。該方法也適用于持續集成（CI）設置。 CI 系統可以安裝本地依賴項，使用它們編譯項目，然后將結果推送到服務器。

要將 webpack 添加到項目中，請執行：

npm install webpack webpack-cli --save-dev # -D to type less

你應該可以在你的 package.json 文件中 devDependencies 部分看到 webpack。除了在 node_modules 目錄下本地安裝軟件包之外，npm 還會為可執行文件生成一個 entry。
You should see webpack at your package.json devDependencies section after this. In addition to installing the package locally below the node_modules directory, npm also generates an entry for the executable.

T> 你可以使用 --save 和 --save-dev 來分離應用程序和開發依賴項。前者安裝并寫入 package.json dependencies字段，而后者則寫入 devDependencies。

T> webpack-cli 附帶了其他功能，包括init和migrate命令，可以快速創建新的 webpack 配置或從舊版本更新版本。

你可以使用 npm bin 顯示可執行文件的確切路徑。它很有可能指向 ./node_modules/.bin。嘗試使用 node_modules/.bin/webpack 或類似命令從終端運行webpack。

運行后，你應該能看到版本號，一條指南鏈接以及一個選項列表。大多數的選項都沒有在這個項目中使用，但了解一下也是極好的。

$ node_modules/.bin/webpack
Hash: 6736210d3313db05db58
Version: webpack 4.1.1
Time: 88ms
Built at: 3/16/2018 3:35:07 PM

WARNING in configuration
The "mode" option has not been set. Set "mode" option to "development" or "production" to enable defaults for this environment.

ERROR in Entry module not found: Error: Can"t resolve "./src" in ".../webpack-demo"

這段輸出說明 webpack 找不到需要編譯的源代碼。同時它還缺少一個 mode 參數判定運行環境。

為了快速了解 webpack 輸出，我們應該解決這兩個問題：

在 src/index.js 寫入 console.log("Hello world");。

執行 node_modules/.bin/webpack --mode development。Webpack 按設置查找源文件。

查看 dist/main.js。你應該看到 webpack 的引導代碼，在引導程序下面，你應該可以看到 console.log("Hello world");。

T> 嘗試添加 --mode production 看返回值有什么不同。

我們嘗試做復雜一點的構建，在項目中添加另一個模塊，逐步開發一個小應用：

src/component.js

export default (text = "Hello world") => {
  const element = document.createElement("div");

  element.innerHTML = text;

  return element;
};

我們還必須修改入口文件，導入新文件，通過 DOM 渲染應用程序：

src/index.js

import component from "./component";

document.body.appendChild(component());

構建后查看輸出文件（node_modules/.bin/webpack --mode development）。你應該看到 webpack 已將兩個模塊寫入 dist 目錄的 bundle。

默認情況下，Webpack 將生成基于 eval 的 source maps，它會讓輸出顯得很混亂，可以把 --devtool false 參數傳遞給 webpack 禁用該行為。詳細信息請參閱 Source Maps 章節。

還有一個問題，我們如何在瀏覽器中測試應用程序？

可以通過編寫指向生成的文件的 index.html 文件來解決該問題。我們無需手動完成這件事，而是借助插件和 webpack 配置來完成此操作。

先安裝 html-webpack-plugin：

npm install html-webpack-plugin --save-dev

在 webpack 中使用 plugins：

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack demo",
    }),
  ],
};

配置完成后，嘗試以下操作：

運行 node_modules/.bin/webpack --mode production 構建項目。你也可以試試 development 模式。

運行 cd dist 進入構建目錄。

使用 serve（npm i serve -g）或類似工具運行服務器。

通過瀏覽器查看結果。希望結果如你所愿~

T> 本書使用 Trailing commas（尾逗號），這樣做 diff 會更清晰簡潔。

現在執行 node_modules/.bin/webpack --mode production，應該看到如下輸出：

Hash: aafe36ba210b0fbb7073
Version: webpack 4.1.1
Time: 338ms
Built at: 3/16/2018 3:40:14 PM
     Asset       Size  Chunks             Chunk Names
   main.js  679 bytes       0  [emitted]  main
index.html  181 bytes          [emitted]
Entrypoint main = main.js
   [0] ./src/index.js + 1 modules 219 bytes {0} [built]
       | ./src/index.js 77 bytes [built]
       | ./src/component.js 142 bytes [built]
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
       [0] (webpack)/buildin/module.js 519 bytes {0} [built]
       [1] (webpack)/buildin/global.js 509 bytes {0} [built]
        + 2 hidden modules

這段輸出的信息量很大：

Hash: aafe36ba210b0fbb7073--當前構建的哈希。使用它來通過 [hash] 占位符使舊版本資源無效。 填充哈希值將在 Adding Hashes to Filenames 章節中詳細討論。

Version: webpack 4.1.1--Webpack版本。

Time: 338ms--執行構建所花費的時間。

main.js 679 bytes 0 [emitted] main--生成資源的名稱，大小，與其相關的 chunks 的 ID，狀態信息，生成方式以及名稱。

index.html 181 bytes [emitted]--進程生成的另一個資源。

[0] ./src/index.js + 1 modules 219 bytes {0} [built]--入口資源的 ID，名稱，大小，entry chunk ID，生成方式。

Child html-webpack-plugin for "index.html":--這是與插件相關的輸出。此輸出為 html-webpack-plugin 創建。

查看 dist/ 目錄下面的輸出。如果仔細觀察，可以在代碼中看到相同的 ID。

T> webpack 配置除對象外，也可以通過返回一個 Promise 并最終 resolve 返回配置信息。

T> 如果不想使用 html-webpack-plugin，可以嘗試功能較少但更好理解的 mini-html-webpack-plugin。

執行 node_modules/.bin/webpack 顯得過于冗長，我們應該為此提供一個快捷入口。修改 package.json：

package.json

"scripts": {
  "build": "webpack --mode production"
},

運行 npm run build 應該能看到與之前相同的輸出。npm 會自動將 node_modules/.bin 添加到路徑中。因此，你不必這么寫 "build": "node_modules/.bin/webpack"，而直接是 "build": "webpack"。

你可以通過 npm run 執行此類腳本，并且可以在項目中的任何位置使用 npm run。如果直接運行 npm run，它將為你提供可用腳本的列表。

T> 還有像 npm start 和 npm test 這樣的快捷方式。你可以在不使用 npm run 的情況下直接運行它們（盡管也可以）。如果你甚至可以懶到使用 npm t 來運行測試。

T> 更進一步，還可以使用終端配置中的 alias 命令設置系統級別名。例如將 nrb 映射到 npm run build。

你可以自己寫 HtmlWebpackPlugin 的 template，但有這里也有一些預設模板，如 html-webpack-template 或 html-webpack-template-pug。

還有一些插件可以擴展 HtmlWebpackPlugin 的功能：

favicons-webpack-plugin 能夠生成favicon。

script-ext-html-webpack-plugin 使你可以更好地控制 script 標記，并允許你進一步調整腳本加載。

style-ext-html-webpack-plugin 將 CSS 引用轉換為內聯 CSS。該技術使 CSS 成為初始加載的一部分，可以快速向客戶端提供關鍵 CSS。

resource-hints-webpack-plugin 添加 resource hints 到你的HTML文件，以加快加載時間。

preload-webpack-plugin 為腳本啟用 rel=preload 功能，對懶加載比較使用，本書 Building 部分將會討論到。

webpack-cdn-plugin 允許你指定通過內容交付網絡（CDN）加載的依賴項。這常用于加速流行庫的加載。

dynamic-cdn-webpack-plugin 功能類似。

雖然你成功運行了 webpack，但這還遠遠不夠，后續開發仍需努力。現在每次要查看應用程序時，都必須使用 npm run build 手動構建，然后刷新瀏覽器。這個痛點是 webpack 高級功能的用武之地。

回顧一下：

本地安裝 webpack 比全局安裝 webpack 更有優勢。這樣你可以保證你正在使用的是哪個版本。本地依賴項也適用于持續集成環境。

Webpack 通過 webpack-cli 包提供命令行界面。雖然沒有配置也可以使用，但任何進階使用都需要配置。

對于更復雜的設置，你很可能需要編寫多帶帶的 webpack.config.js 文件。

HtmlWebpackPlugin 可用于生成應用程序的 HTML 入口。在 Multiple Pages 一章中，你將了解如何使用它生成多個獨立的頁面。

使用 npm package.json 腳本來管理 webpack 很方便。你可以將它用作輕型任務運行器，也可以使用于 webpack 之外的其他功能。

在下一章中，你將學習如何通過啟用自動瀏覽器刷新來改善開發體驗。