從 0 開始構建 webpack 項目【Webpack Book 翻譯】

時間 2019-12-07

標籤開始構建 webpack 項目 book 翻譯简体版

原文原文鏈接

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

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

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

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

創建項目

首先，你應該爲項目建立一個目錄並在那裏新建 package.json。 npm 使用它來管理項目依賴。如下是基本命令：node

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

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

T> 你能夠在 ~/.npmrc 中設置 npm init 的默認值。git

T> 這是使用 Git 進行版本控制的絕佳機會。你能夠爲每一個步驟/每一章節建立一個 commit，這樣你能夠輕鬆作到回滾。github

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

安裝 Webpack

即便能夠全局安裝 webpack（npm install webpack -g），最好仍是將它做爲項目的依賴項來維護，以免出現由於不一樣版本帶來的意外問題。該方法也適用於持續集成（CI）設置。 CI 系統能夠安裝本地依賴項，使用它們編譯項目，而後將結果推送到服務器。docker

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

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 配置或從舊版本更新版本。

執行 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 章節。

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

配置 html-webpack-plugin

能夠經過編寫指向生成的文件的 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` 擴展

你能夠本身寫 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 以外的其餘功能。

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