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

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

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

通過使用 Docker，Vagrant 或 nvm 等方案，可以獲得更加可控的環(huán)境。Vagrant 可以為團(tuán)隊(duì)中每個(gè)開發(fā)人員提供統(tǒng)一的環(huán)境，但它因依賴于虛擬機(jī)，性能稍處劣勢(shì)。

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

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

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

生成 package.json 后，你可以手動(dòng)對(duì)其進(jìn)一步更改。官方文檔更詳細(xì)地解釋了 package.json選項(xiàng)。

T> 你可以在 ~/.npmrc 中設(shè)置 npm init 的默認(rèn)值。

T> 這是使用 Git 進(jìn)行版本控制的絕佳機(jī)會(huì)。你可以為每個(gè)步驟/每一章節(jié)創(chuàng)建一個(gè) commit，這樣你可以輕松做到回滾。

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

即使可以全局安裝 webpack（npm install webpack -g），最好還是將它作為項(xiàng)目的依賴項(xiàng)來維護(hù)，以避免出現(xiàn)因?yàn)椴煌姹編淼囊馔鈫栴}。該方法也適用于持續(xù)集成（CI）設(shè)置。 CI 系統(tǒng)可以安裝本地依賴項(xiàng)，使用它們編譯項(xiàng)目，然后將結(jié)果推送到服務(wù)器。

要將 webpack 添加到項(xiàng)目中，請(qǐng)執(zhí)行：

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

你應(yīng)該可以在你的 package.json 文件中 devDependencies 部分看到 webpack。除了在 node_modules 目錄下本地安裝軟件包之外，npm 還會(huì)為可執(zhí)行文件生成一個(gè) 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 來分離應(yīng)用程序和開發(fā)依賴項(xiàng)。前者安裝并寫入 package.json dependencies字段，而后者則寫入 devDependencies。

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

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

運(yùn)行后，你應(yīng)該能看到版本號(hào)，一條指南鏈接以及一個(gè)選項(xiàng)列表。大多數(shù)的選項(xiàng)都沒有在這個(gè)項(xiàng)目中使用，但了解一下也是極好的。

$ 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 找不到需要編譯的源代碼。同時(shí)它還缺少一個(gè) mode 參數(shù)判定運(yùn)行環(huán)境。

為了快速了解 webpack 輸出，我們應(yīng)該解決這兩個(gè)問題：

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

執(zhí)行 node_modules/.bin/webpack --mode development。Webpack 按設(shè)置查找源文件。

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

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

我們嘗試做復(fù)雜一點(diǎn)的構(gòu)建，在項(xiàng)目中添加另一個(gè)模塊，逐步開發(fā)一個(gè)小應(yīng)用：

src/component.js

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

  element.innerHTML = text;

  return element;
};

我們還必須修改入口文件，導(dǎo)入新文件，通過 DOM 渲染應(yīng)用程序：

src/index.js

import component from "./component";

document.body.appendChild(component());

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

默認(rèn)情況下，Webpack 將生成基于 eval 的 source maps，它會(huì)讓輸出顯得很混亂，可以把 --devtool false 參數(shù)傳遞給 webpack 禁用該行為。詳細(xì)信息請(qǐng)參閱 Source Maps 章節(jié)。

還有一個(gè)問題，我們?nèi)绾卧跒g覽器中測(cè)試應(yīng)用程序？

可以通過編寫指向生成的文件的 index.html 文件來解決該問題。我們無需手動(dòng)完成這件事，而是借助插件和 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",
    }),
  ],
};

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

運(yùn)行 node_modules/.bin/webpack --mode production 構(gòu)建項(xiàng)目。你也可以試試 development 模式。

運(yùn)行 cd dist 進(jìn)入構(gòu)建目錄。

使用 serve（npm i serve -g）或類似工具運(yùn)行服務(wù)器。

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

T> 本書使用 Trailing commas（尾逗號(hào)），這樣做 diff 會(huì)更清晰簡(jiǎn)潔。

現(xiàn)在執(zhí)行 node_modules/.bin/webpack --mode production，應(yīng)該看到如下輸出：

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--當(dāng)前構(gòu)建的哈希。使用它來通過 [hash] 占位符使舊版本資源無效。 填充哈希值將在 Adding Hashes to Filenames 章節(jié)中詳細(xì)討論。

Version: webpack 4.1.1--Webpack版本。

Time: 338ms--執(zhí)行構(gòu)建所花費(fèi)的時(shí)間。

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

index.html 181 bytes [emitted]--進(jìn)程生成的另一個(gè)資源。

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

Child html-webpack-plugin for "index.html":--這是與插件相關(guān)的輸出。此輸出為 html-webpack-plugin 創(chuàng)建。

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

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

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

執(zhí)行 node_modules/.bin/webpack 顯得過于冗長(zhǎng)，我們應(yīng)該為此提供一個(gè)快捷入口。修改 package.json：

package.json

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

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

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

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

T> 更進(jìn)一步，還可以使用終端配置中的 alias 命令設(shè)置系統(tǒng)級(jí)別名。例如將 nrb 映射到 npm run build。

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

還有一些插件可以擴(kuò)展 HtmlWebpackPlugin 的功能：

favicons-webpack-plugin 能夠生成favicon。

script-ext-html-webpack-plugin 使你可以更好地控制 script 標(biāo)記，并允許你進(jìn)一步調(diào)整腳本加載。

style-ext-html-webpack-plugin 將 CSS 引用轉(zhuǎn)換為內(nèi)聯(lián) CSS。該技術(shù)使 CSS 成為初始加載的一部分，可以快速向客戶端提供關(guān)鍵 CSS。

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

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

webpack-cdn-plugin 允許你指定通過內(nèi)容交付網(wǎng)絡(luò)（CDN）加載的依賴項(xiàng)。這常用于加速流行庫(kù)的加載。

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

雖然你成功運(yùn)行了 webpack，但這還遠(yuǎn)遠(yuǎn)不夠，后續(xù)開發(fā)仍需努力?，F(xiàn)在每次要查看應(yīng)用程序時(shí)，都必須使用 npm run build 手動(dòng)構(gòu)建，然后刷新瀏覽器。這個(gè)痛點(diǎn)是 webpack 高級(jí)功能的用武之地。

回顧一下：

本地安裝 webpack 比全局安裝 webpack 更有優(yōu)勢(shì)。這樣你可以保證你正在使用的是哪個(gè)版本。本地依賴項(xiàng)也適用于持續(xù)集成環(huán)境。

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

對(duì)于更復(fù)雜的設(shè)置，你很可能需要編寫多帶帶的 webpack.config.js 文件。

HtmlWebpackPlugin 可用于生成應(yīng)用程序的 HTML 入口。在 Multiple Pages 一章中，你將了解如何使用它生成多個(gè)獨(dú)立的頁(yè)面。

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

在下一章中，你將學(xué)習(xí)如何通過啟用自動(dòng)瀏覽器刷新來改善開發(fā)體驗(yàn)。