1.3　通過Visual Studio Code開發Node應用

本節將介紹如何開發一個完整的Node應用程序。這里需要用到Visual Studio Code（簡稱VS Code）作為Node代碼開發和管理的工具，同時還需要使用Webpack模塊打包器作為構建Node應用框架的工具。這些都是開發Web前端應用的基礎工具。

1.3.1　通過Visual Studio Code開發和管理代碼

Visual Studio Code可謂是近年來風頭日盛的代碼開發和管理工具，該工具由微軟（Microsoft）公司負責開發與維護，并在2015年4月30日的Build開發者大會上第一次正式對外發布。

Visual Studio Code的設計目標是成為一款能夠滿足跨平臺運行的、輕量級的、可擴展的開發工具，主要用作編寫當前流行的Web應用和云服務應用的源代碼編輯器。雖然，Visual Studio Code隸屬于Visual Studio系列開發平臺，但與諸如Visual Studio 2019、Visual Studio 2022這類重量級的、功能強大的、集成式的開發平臺完全不同，其自身僅是一款源代碼編輯器，寫好的C程序無法編譯運行，JavaScript腳本文件也無法解釋執行。

不過，如果因此而小看Visual Studio Code就大錯特錯了，Visual Studio Code的特點就是提供了很強的擴展功能，強大到讓設計人員驚嘆的程度。Visual Studio Code的擴展功能是通過安裝相應的插件實現的，前面提到的C程序和JavaScript腳本，甚至包括Java、Python、Node程序，以及本書后面將要重點介紹的Vue.js程序，都可以通過安裝相對應的功能插件而得到支持。因此，Visual Studio Code在極短的時間內就得到了業內的充分認可，并迅速在源代碼編輯器市場占據了一席之地。對此，相信你也只能感嘆微軟研發能力的強大了。

在Windows平臺下安裝Visual Studio Code的操作非常簡單，自家的操作系統平臺自然會提供最好的支持。首先，進入Visual Studio Code官方網址的下載頁面（https://code.visualstudio.com/Download），如圖1.17所示。

在Windows系統平臺區域中的“System Installer”類別中選擇64-bit版本的安裝包（VSCodeSetup-x64-1.81.1.exe）進行下載，該版本是為系統用戶配置的。另外，還有一種“User Installer”類別是為個人用戶配置的版本。在圖1.17中還可以看到Visual Studio Code的Linux版本和Mac版本，這表明Visual Studio Code是一款跨平臺的開發工具。

在Windows操作系統中安裝VS Code，直接雙擊運行安裝包，按照安裝步驟操作就可以了。

　首先會進入安裝程序的“許可協議”界面，如圖1.18所示。

　單擊“我接受協議”單選按鈕，激活“下一步”按鈕，然后單擊“下一步”按鈕進入“選擇目標位置”界面，如圖1.19所示。在這里可以選擇用戶自定義的Visual Studio Code安裝路徑。

　繼續單擊“下一步”按鈕進入實際安裝過程，直到安裝程序執行完畢，如圖1.20所示。

　如果勾選了“啟動Visual Studio Code”復選框，在單擊“完成”按鈕時就會退出安裝程序，同時自動運行Visual Studio Code開發工具。初次運行Visual Studio Code的界面如圖1.21所示。Visual Studio Code開發工具的界面非常簡潔（輕量級），窗口的頂部是一個主菜單欄，窗口的左側是一列快捷工具按鈕列表（可以安裝擴展功能），窗口的主體是文檔編輯區域（上面顯示的內容包括一些開發功能的快捷方式）。

　單擊左側快捷工具按鈕列表中最上面的“資源管理器（Ctrl+Shift+E）”按鈕，界面效果如圖1.22所示。

如圖1.22中的箭頭和標識所示，打開“資源管理器”后，會在窗口左側顯示一個區域，里面包括了工程目錄、大綱和時間線等項目。

在VS Code資源管理器中，設計人員可以新建或引入自己的工程目錄進行源代碼的有效管理。本書的工程名稱為“vueprojects”（注意，VS Code默認會將工程目錄名稱全部顯示為大寫）。

下面嘗試通過Visual Studio Code測試運行【代碼1-1】所創建的commandline.js文件。首先，在Visual Studio Code中通過“文件”菜單中的“打開文件夾…”菜單項來打開工程目錄，效果如圖1.23所示。

如圖1.23中的箭頭所示，單擊“打開文件…”后會打開一個“文件選擇對話框”，選中之前創建好的vueprojects工程目錄就可以了，效果如圖1.24所示。

如圖1.24中的箭頭所示，已經能看到之前【代碼1-1】所創建的commandline.js文件。那么，如何通過Visual Studio Code工具運行該JavaScript腳本文件呢？

這里，需要在Visual Studio Code中安裝一個名稱為“Code Runner”的插件，之后就能運行JavaScript腳本文件，具體安裝方法如下：

在左側快捷工具按鈕列表中找到“擴展（Ctrl+Shift+X）”按鈕，界面效果如圖1.25所示。

如圖1.25中的箭頭和標識所示，打開“擴展”界面后在搜索欄輸入“Code Runner”字符串，下面擴展列表中自動篩選出來的第一項就是Code Runner插件，直接單擊進行“安裝”即可。由于筆者已經安裝過該插件，因此圖1.25中顯示的是已安裝狀態，從右側主窗口可以看到關于Code Runner插件的功能介紹，該插件除了支持JavaScript腳本語言外，還支持多種編程語言（C、C++、Java、PHP、Python、Go等），功能十分強大。

安裝好Code Runner插件后，就可以直接在VS Code中測試運行JavaScript腳本文件了。返回如圖1.24所示的界面，選中并右擊commandline.js文件，會彈出一個快捷菜單，如圖1.26所示。

如圖1.26中的箭頭所示，在快捷菜單中單擊Run Code菜單項，Visual Studio Code開發工具會彈出一個“輸出”界面窗口，顯示JavaScript代碼調試運行的輸出結果，效果如圖1.27所示。

如圖1.27中的標識所示，調試運行的輸出結果與圖1.16所示的結果是一致的，說明Visual Studio Code開發工具的Code Runner插件運行方式，可以完美替代Node程序的命令行終端運行方式。

1.3.2　通過Webpack構建Node應用程序架構

前文中介紹了如何通過Visual Studio Code的插件運行單個JavaScript腳本文件的Node程序。不過，這種開發方式在近年來已經被一種全新的、以自動化方式構建Web前端應用的方式取代了。

所謂“自動化”方式，其實就是通過一種或幾種自動化工具來構建Web前端應用的開發框架。這類開發框架基本都是通過一種或幾種工具自動生成的，生成后的框架會包含大部分Web前端應用所需的基本類庫、第三方插件和支撐配置文件，等等。可以說，這種全新的開發方式將Web前端應用開發提升到了一個全新的高度，并且符合將前后端分離開來進行獨立設計的大趨勢。

Web前端的自動化構建工具有很多種，其中最著名的就是Webpack模塊化打包器工具，它也是目前Web前端開發中最流行的工具之一。Webpack的功能十分強大，設計了“入口（entry）”“輸出（output）”“加載器（loader）”和“插件（plugins）”這四個概念，以遞歸方式構建出一個應用程序主要資源的依賴關系圖，并將JavaScript模塊打包成一個或多個“包（bundle）”。

由于本書不是專門介紹Webpack工具的（感興趣的讀者可以參考Webpack官網的內容），這里僅就如何使用Webpack工具構建Node應用進行簡單介紹，過程如下：

（1）創建Node應用程序目錄，并進入該目錄，命令行如下：

mkdir vueprojects && cd vueprojects

（2）通過npm命令進行初始化項目的操作，命令行如下：

npm init -y

npm就是包管理工具命令，參數init表示進行Node應用項目的初始化操作。該命令參數會生成一個package.json配置文件，用于描述該項目的詳細配置信息。如果再添加-y參數，則表示項目使用默認的配置參數（省去了人工配置的過程），效果如圖1.28所示。

圖1.28所示的命令行中顯示出生成的package.json文件內容，這些信息都是默認生成的，后期用戶可以自行修改。

（3）通過npm命令在本地安裝Webpack開發包，命令如下：

npm install webpack webpack-cli --save-dev

在npm命令中使用參數install表示安裝第三方開發包，后面指定了開發包的名稱“webpack”和“webpack-cli”。其中，webpack-cli是webpack的命令行工具，也就是在命令行中可以支持使用Webpack。另外，使用參數“--save-dev”表示該安裝包為調試開發時的依賴項，信息會記錄到package.json文件中的devDependencies子項中，后期項目發布時不需要這些安裝包。安裝過程需要一些時間，請耐心等待。安裝效果如圖1.29所示。

如圖1.29中的箭頭和標識所示，已經成功安裝了webpack@5.88.2和webpack-cli@5.1.4開發包，其中“@”符號后面標識的是開發包的版本號。

至此，通過Webpack工具構建Node.js應用程序框架就基本完成了。

1.3.3　通過Visual Studio Code開發調試Node應用

目前，有多種開發工具可以支持Node.js應用的開發，比如jetBrains WebStorm、Eclipse、Visual Studio Code等。這些開發工具原則上是“條條大路通羅馬”的，相互間各有優勢，并無優劣之分。在本書中，我們選擇Visual Studio Code開發工具，其中一個原因也是為了配合后面講解Vue.js的相關內容。

下面，通過VS Code打開剛剛創建的Node應用目錄（vueprojects），效果如圖1.30所示。

查看圖1.30左上方的方框標識，里面顯示了Node應用的目錄結構，具體內容如圖1.31所示。

node_modules目錄存放了通過npm命令安裝的各種開發包，里面不僅有剛剛安裝的webpack和webpack_cli開發包，還包括了整個Node生態系統必要的依賴項。因此，node_modules目錄的體積通常有一個較大的數量級，這點也算是Node生態系統的不足之處。

再次返回圖1.30所示的窗口，打開的是package.json配置文件，內容如下：

【代碼1-2】

01  {
02    "name": "vueprojects",
03    "version": "1.0.0",
04    "description": "",
05    "main": "index.js",
06    "scripts": {
07      "test": "echo \"Error: no test specified\" && exit 1"
08    },
09    "keywords": [],
10    "author": "",
11    "license": "ISC",
12    "devDependencies": {
13      "webpack": "^5.88.2",
14      "webpack-cli": "^5.1.4"
15    }
16  }

【代碼說明】

·　第02行代碼中的“name”字段標識的是該項目的名稱（vueprojects）。

·　第03行代碼中的“version”字段標識的是該項目的版本號（1.0.0）。

·　第05行代碼中的“main”字段標識的是該項目的主入口腳本文件。

·　第06行代碼中的“scripts”字段用于執行自定義腳本命令。這里定義“test”參數，就相當于執行“npm run test”腳本命令。

·　第12～15行代碼中的“devDependencies”字段用于定義開發調試階段安裝的依賴項，其中第13、14行代碼定義的依賴項印證了之前的安裝命令（npm install webpack webpack-cli--save-dev）。

以上關于package.json配置文件的內容都是最基本的。功能越復雜，安裝依賴項越多，package.json配置文件的信息也會隨之增加。

另外，還有一個package-lock.json配置文件，這個文件是在npm v5版本以后新增加的功能。在通過npm install命令安裝開發包后會自動生成該文件，該文件鎖定了當前安裝的小版本號。因此，當用戶再次使用npm install命令后，就可以避免通過package.json配置文件將開發包升級到最新版本，從而有效地避免了因為版本升級帶來的各種依賴沖突。但是，若用戶真想升級到最新版本或某個指定版本，則必須在開發包名稱后使用“@latest”或“@版本號”來執行指定版本號的升級。

下面具體介紹如何開發一個基本的Node應用程序，該程序實現了一個簡單的、基于Node框架的Web服務器。

　在應用程序根目錄下創建一個HTML 5頁面文件（index.html），我們通過Visual Studio Code開發工具來實現該操作。在應用程序根目錄（vueprojects）上單擊“新建文件”圖標，效果如圖1.32所示。

單擊“新建文件”圖標后會自動創建一個文件。注意，這個文件沒有名稱，也沒有文件類型后綴，全部需要設計人員手動輸入（index.html），這點可能與其他開發平臺差異比較大。因此，該新建文件是一個空白的HTML5網頁，如圖1.33所示。

新建的index.html網頁全部空白，沒有一行默認生成的代碼。此時，讀者如果質疑Visual Studio Code開發工具，那就大錯特錯了。Visual Studio Code為設計人員提供了很強大的自動代碼生成功能，下面演示如何操作。

在空白頁面最開始處輸入字符“!”，會彈出一個快捷輸入方式，如圖1.34所示。

如圖1.34中箭頭所示，此時會彈出一個快捷輸入方式，里面的列表菜單中有一個“!”選項。注意，后面的提示信息為“Emmet Abbreviation”，說明該功能是由Emmet插件所提供的。這個Emmet插件可謂是大名鼎鼎，在很多集成開發工具或輕量級代碼編輯器中都有其身影，是一款非常好用的代碼自動生成工具。因此，Visual Studio Code就將Emmet插件內置其中，用戶不用再單獨安裝該插件了。

下面看一下Emmet插件的使用方法，選中“!”選項后直接按回車鍵或Tab鍵，效果如圖1.35所示，Emmet插件直接在index.html文件中自動生成了一個HTML 5網頁模板。

　在應用程序根目錄下創建一個src子目錄，在該子目錄下新建一個JavaScript腳本文件（index.js），方法同圖1.32所示。在index.js腳本文件中輸入如下代碼：

【代碼1-3】

01  document.write('Hello Node!');

【代碼說明】

·　第01行代碼通過調用document對象的write()方法向頁面中寫入一行信息。

　對index.html頁面代碼進行適當修改，將index.js腳本文件在index.html頁面文件中進行引用，代碼如下：

【代碼1-4】

01  <!DOCTYPE html>
02  <html lang="en">
03  <head>
04      <meta charset="UTF-8">
05    <meta name="viewport" content="width=device-width, initial-scale=1.0">
06      <title>Document</title>
07  </head>
08  <body>
09      <script src="./src/index.js"></script>
10  </body>
11  </html>

【代碼說明】

·　在第09行代碼中通過<script>標簽引入了index.js腳本文件。

　更新package.json配置文件的內容，代碼如下：

【代碼1-5】

01  {
02    "name": "vueprojects",
03    "version": "1.0.0",
04    "description": "",
05    "private": true,
06    "scripts": {
07      "test": "echo \"Error: no test specified\" && exit 1"
08    },
09    "keywords": [],
10    "author": "",
11    "license": "ISC",
12    "devDependencies": {
13      "webpack": "^5.88.2",
14      "webpack-cli": "^5.1.4"
15    }
16  }

【代碼說明】

·　在第05行代碼中添加private參數，確保安裝包是私有的（private）；同時，移除main入口，防止意外發布應用代碼。

　此時就可以簡單地測試一下該Node應用了，最直接的方法就是在瀏覽器中運行index.html頁面文件，效果如圖1.36所示。

如圖中的箭頭所示，瀏覽器頁面中顯示了index.js腳本代碼執行的結果。不過，雖然Node應用被正確執行了，但遠沒有發揮出Webpack工具的能力。下面，我們通過Webpack重構一下這個Node應用。

　創建“分發（dist）”目錄結構。

這里需要調整一下原始的目錄結構，將“源（src）”代碼從“分發（dist）”代碼中分離出來。根據Webpack定義的規范，“源（src）”代碼是開發時使用的代碼，“分發（src）”代碼是構建過程產生的代碼最小化和優化后的“輸出（output）”目錄，用于在瀏覽器中展示給終端用戶。

具體操作還是在Visual Studio Code工具下完成，效果如圖1.37所示。

如上圖中的箭頭所示，我們還需要將index.html頁面文件移入“分發（dist）”目錄，以便于后期調試運行。

　修改完善index.js腳本文件和重新更新index.html頁面文件。

將直接在頁面文檔寫入（document.write()方法）文本的方式，替換為通過分區（div）標簽插入文本的方式。另外，這里需要借助Lodash插件來完成該任務。Lodash是一個高性能的、模塊化的JavaScript實用工具庫，它簡化了數組、字符串和對象等類型的操作難度，在業內十分受歡迎。Lodash插件的使用方法有以下3種：

①　直接引用方式：

<script src="lodash.js"></script>

② CDN方式：

<script src="https://unpkg.com/lodash@4.17.5"></script>

③　本地安裝方式：

npm install --save lodash  // --save表示為生產環境

以上3種方式均可行，但從Node應用的角度看，推薦使用第3種方式。Lodash本地安裝的過程如圖1.38所示。

如圖1.38中的箭頭所示，默認安裝的是Lodash庫的最新穩定版（4.17.15）。另外，在第2種“CDN方式”中，安裝一般都是最新的穩定版。

接下來，修改一下index.js腳本文件，修改后的代碼如下：

【代碼1-6】

01  import _ from 'lodash';
02  /**
03   * func - create div component
04   */
05  function divComp() {
06      var eleDiv = document.createElement('div');
07      // TODO: use Lodash '_' to join string.
08      eleDiv.innerHTML = _.join(['Hello', 'Webpack', '!'], ' ');
09      // TODO: return element div
10      return eleDiv;
11  }
12  // TODO: append div to body
13  document.body.appendChild(divComp());

【代碼說明】

·　在第01行代碼中，通過import方式導入已安裝的Lodash模塊，并將模塊命名為“_”（Lodash通用命名方式）。

·　第05～11行代碼定義一個divComp()方法，用于創建一個分區（div）標簽元素，然后在該標簽元素內插入文本信息。具體內容如下：

?　在第06行代碼中，通過document對象調用createElement()方法創建一個分區（div）標簽元素（eleDiv）。

?　在第08行代碼中，通過“_”調用join()方法連接一組字符串，并定義為分區（eleDiv）標簽元素的innerHTML屬性。

?　在第10行代碼中，返回創建好的分區（eleDiv）標簽元素。

·　在第13行代碼中，通過document對象的appendChild()方法，將剛剛創建的分區（eleDiv）元素追加到body元素中，實現在頁面中輸入文本的效果。

在修改好index.js腳本文件后，還要修改一下index.html頁面文件。因為現在需要通過Webpack工具打包合成腳本文件，所以需要加載分發（dist）目錄中的bundle（包）腳本文件（main.js），這里就不再需要加載src目錄的原始腳本文件了。index.html頁面文件修改后的代碼如下：

【代碼1-7】

01  <!DOCTYPE html>
02  <html lang="en">
03  <head>
04      <meta charset="UTF-8">
05    <meta name="viewport" content="width=device-width, initial-scale=1.0">
06      <title>Document</title>
07  </head>
08  <body>
09      <!--<script src="./src/index.js"></script>-->
10      <script src="main.js"></script>
11  </body>
12  </html>

【代碼說明】

·　在第09行代碼中，注釋了通過<script>標簽引入的index.js腳本文件。

·　在第10行代碼中，通過<script>標簽引入了main.js腳本文件。

　通過Webpack工具打包Node應用。

通過執行Webpack打包命令，將index.js腳本作為入口起點，打包合并輸出main.js腳本文件。命令如下：

npx webpack

npx命令是從npm 5.2+版本開始提供的命令，可以自動執行npm包內的二進制安裝文件。npx webpack命令的執行過程，如圖1.39所示。

如上圖中的箭頭所示，通過Webpack打包后自動生成了main.js腳本文件。至于后面的警告信息先不用理會，后續會通過相關配置消除該警告信息。

接下來，返回VS Code的項目源代碼目錄（dist）看一下有沒有什么變化，效果如圖1.40所示。

如圖1.40中的箭頭所示，在“分發（dist）”目錄下自動生成了一個main.js腳本文件，這就是通過Webpack工具打包生成的bundle包文件。下面，讓我們見識一下這個main.js腳本文件的廬山真面目，如圖1.41所示。

main.js腳本文件是一個經過代碼壓縮的打包文件（提高運行速度），但代碼閱讀起來是相當有難度的。另外，還可以看到main.js腳本文件將Lodash包也一起合并壓縮進去了。

　再次測試這個Node應用，在瀏覽器中打開index.html頁面文件，效果如圖1.42所示。

如圖1.42中的箭頭所示，瀏覽器頁面中顯示了index.js腳本代碼第二次更新修改后的執行結果（Hello Webpack!），說明經過Webpack工具打包后生成的main.js腳本文件被正確運行了。

　使用Webpack配置文件。

細心的讀者可能會發現上面的“步驟08”有些奇怪，在Webpack打包過程中似乎隱藏了一些細節，在main.js腳本文件中看不到具體配置信息。其實，這是通過Webpack工具的默認配置完成的，而它對于簡單的應用通常不需要配置。

但是，Webpack工具有一個配置文件（webpack.config.js），在應對較為復雜的Node應用時就可以派上用場。在應用Webpack工具時，通過使用配置文件（webpack.config.js）可以有效地避免在命令行終端中手動輸入大量煩瑣的命令，通過自動化的方式完成壓縮、合并和打包等復雜操作。

Webpack配置文件（webpack.config.js）一般放置在Node應用的根目錄下，與Node應用配置文件（package.json）處于同一級，效果如圖1.43所示。

如圖1.43中的箭頭所示，Webpack配置文件（webpack.config.js）放置于Node應用（vueprojects）根目錄下。

下面簡單配置一下Webpack配置文件（webpack.config.js），代碼如下：

【代碼1-8】

01  const path = require('path');
02  /**
03   * module : exports
04   */
05  module.exports = {
06    entry: './src/index.js',
07    output: {
08      filename: 'bundle.js',
09      path: path.resolve(__dirname, 'dist')
10    },
11    mode: 'development'
12  };

【代碼說明】

·　在第06行代碼中，通過entry參數配置Webpack工具打包的入口（index.js腳本文件的路徑）。

·　在第07行代碼中，通過output參數配置Webpack工具打包的出口，具體內容如下：

?　在第08行代碼中，通過filename參數配置打包后的出口腳本文件的名稱（bundle.js）。

?　在第09行代碼中，通過path參數解析打包后的出口文件路徑。

·　在第11行代碼中，通過mode參數配置打包模式（development表示開發模式，該模式會對腳本代碼進行壓縮）。

　重新配置package.json配置文件。

在原始package.json配置文件中的scripts節點下添加一個build參數，具體腳本代碼如下：

【代碼1-9】

01  {
02    "name": "vueprojects",
03    "version": "1.0.0",
04    "description": "",
05    "private": true,
06    "scripts": {
07      "test": "echo \"Error: no test specified\" && exit 1",
08      "build": "webpack"
09    },
10    "keywords": [],
11    "author": "",
12    "license": "ISC",
13    "devDependencies": {
14      "webpack": "^4.43.0",
15      "webpack-cli": "^3.3.11"
16    },
17    "dependencies": {
18      "lodash": "^4.17.15"
19    }
20  }

【代碼說明】

·　在第08行代碼中，新添加了一個build參數，參數值指向webpack命令。

　再次修改index.js腳本文件和index.html頁面文件。

修改后的index.js腳本文件代碼如下：

【代碼1-10】

01  import _ from 'lodash';
02  //func - create div component
03  function divComp() {
04      var eleDiv = document.createElement('div');
05      // TODO: use Lodash '_' to join string.
06      eleDiv.innerHTML = _.join(['Hello','Webpack','&','NodeJS','!'],' ');
07      // TODO: return element div
08      return eleDiv;
09  }
10  // TODO: append div to body
11  document.body.appendChild(divComp());

【代碼說明】

·　在第06行代碼中，通過Lodash插件庫重新連接了一組字符串，用于在頁面中進行顯示。

由于在Webpack配置文件（webpack.config.js）中重新定義出口腳本文件（bundle.js），因此還要再修改一下index.html頁面文件，修改后的代碼如下：

【代碼1-11】

01  <!DOCTYPE html>
02  <html lang="en">
03  <head>
04      <meta charset="UTF-8">
05    <meta name="viewport" content="width=device-width, initial-scale=1.0">
06      <title>Document</title>
07  </head>
08  <body>
09      <!--<script src="./src/index.js"></script>-->
10      <!--<script src="main.js"></script>-->
11      <script src="bundle.js"></script>
12  </body>
13  </html>

【代碼說明】

·　在第10行代碼中，再次注釋了通過<script>標簽引入的main.js腳本文件。

·　在第11行代碼中，通過<script>標簽引入了bundle.js腳本文件。

　再次通過Webpack工具打包Node應用。

由于在package.json配置文件的script節點中重新定義腳本執行命令，因此需要輸入新的命令來執行Webpack打包操作，命令如下：

npm run build     // build parameter is defined in package.json

上面命令行中的build參數是在package.json配置文件中定義的，讀者可以返回去參考一下。

關于npm run build命令的執行過程，如圖1.44所示。

如圖1.44中的箭頭所示，通過Webpack打包后自動重新生成了bundle.js腳本文件。另外可以注意到，警告信息已經不見了，這是因為在【代碼1-8】中的第11行代碼中添加了mode參數。

下面，我們再次返回Visual Studio Code開發工具的源代碼目錄（dist）看一下有沒有什么變化，效果如圖1.45所示。

如圖1.45中的箭頭所示，在“分發（dist）”目錄下自動生成了一個bundle.js腳本文件，這就是通過Webpack工具配置文件重新打包生成的bundle包文件。這個重新生成的bundle.js腳本文件是符合ES 6標準規范的，由于代碼比較長，這里就不做演示了。

　此時可以再次測試一下這個Node應用，仍舊是在瀏覽器中運行index.html頁面文件，效果如圖1.46所示。

如圖1.46中的箭頭所示，瀏覽器頁面中顯示了index.js腳本代碼第三次更新修改后的執行結果（Hello Webpack & NodeJS!），說明通過Webpack工具配置文件打包后生成的bundle.js腳本文件被正確運行了。

　通過webpack-dev-server插件實現Node應用熱加載。

Webpack工具的打包功能固然十分強大，不過相信讀者也發現了每次的打包操作都需要手動進行，之后的頁面測試過程也很粗放（直接運行HTML頁面）。于是，研發人員為了配合Webpack工具就設計了一個webpack-dev-server插件，可以實現Node應用的自動打包和熱加載功能。webpack-dev-server插件的安裝方法與webpack方式一致，命令如下：

npm install webpack-dev-server --save-dev

安裝完畢后，還需要在package.json配置文件的script節點中，新增一個dev參數，配置信息為插件名稱（webpack-dev-server）。

然后，通過直接運行npm run dev命令就可以進行打包操作了，效果如圖1.47所示。

如圖1.47中的標識所示，命令行終端中給出了Node應用服務端運行地址的提示信息（http://localhost:8080/）。通過瀏覽器直接訪問該地址就能測試該項目了，效果如圖1.48所示。

如圖1.48中的箭頭所示，頁面打開后顯示的并不是預期的運行效果，而是項目的目錄結構。這里，需要再次單擊“分發（dist）”目錄才可以運行index.html頁面。

下面，我們體驗一下webpack-dev-server插件的熱加載功能。具體方法就是修改更新一下源文件（index.js）代碼，然后注意觀察一下命令行終端的變化，如圖1.49所示。

如圖1.49中的箭頭所示，在沒有經過手動命令操作的情況下，webpack-dev-server插件重新編譯了源文件，這就是所謂的“熱加載”功能。不過，比較遺憾的是瀏覽器頁面并不會隨之更新，需要手動操作來完成更新顯示。

　配合HotModuleReplacementPlugin插件實現Node應用熱更新。

為了解決webpack-dev-server插件無法實現熱更新操作的問題，可以使用Webpack工具自帶的HotModuleReplacementPlugin插件，來配合webpack-dev-server插件完成熱更新功能。

使用HotModuleReplacementPlugin插件時，需要在Webpack配置文件（webpack.config.js）中增加plugins節點的配置，代碼如下：

plugins: [
   new webpack.HotModuleReplacementPlugin()
  ]

然后，再次嘗試修改更新一下源文件（index.js）代碼，注意觀察瀏覽器頁面的變化，如圖1.50所示。

如圖1.50中的箭頭所示，瀏覽器頁面的內容通過“熱更新”功能進行了自動更新。至此，關于使用Visual Studio Code開發工具通過Webpack開發Node應用的基本方法，這里就基本介紹完成了，希望讀者能熟練掌握這個集成開發工具。