下载掌阅APP，畅读海量书库
立即打开
本节将介绍如何开发一个完整的Node应用程序。这里需要用到Visual Studio Code（简称VS Code）作为Node代码开发和管理的工具，同时还需要使用Webpack模块打包器作为构建Node应用框架的工具。这些都是开发Web前端应用的基础工具。
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所示。
图1.17 Visual Studio Code官方下载页面
在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.18 Visual Studio Code安装过程（1）
图1.19 Visual Studio Code安装过程（2）
继续单击“下一步”按钮进入实际安装过程，直到安装程序执行完毕，如图1.20所示。
图1.20 Visual Studio Code安装过程（3）
如果勾选了“启动Visual Studio Code”复选框，在单击“完成”按钮时就会退出安装程序，同时自动运行Visual Studio Code开发工具。初次运行Visual Studio Code的界面如图1.21所示。Visual Studio Code开发工具的界面非常简洁（轻量级），窗口的顶部是一个主菜单栏，窗口的左侧是一列快捷工具按钮列表（可以安装扩展功能），窗口的主体是文档编辑区域（上面显示的内容包括一些开发功能的快捷方式）。
单击左侧快捷工具按钮列表中最上面的“资源管理器（Ctrl+Shift+E）”按钮，界面效果如图1.22所示。
图1.21 Visual Studio Code程序初次运行界面
图1.22 Visual Studio Code资源管理器
如图1.22中的箭头和标识所示，打开“资源管理器”后，会在窗口左侧显示一个区域，里面包括了工程目录、大纲和时间线等项目。
在VS Code资源管理器中，设计人员可以新建或引入自己的工程目录进行源代码的有效管理。本书的工程名称为“vueprojects”（注意，VS Code默认会将工程目录名称全部显示为大写）。
下面尝试通过Visual Studio Code测试运行【代码1-1】所创建的commandline.js文件。首先，在Visual Studio Code中通过“文件”菜单中的“打开文件夹…”菜单项来打开工程目录，效果如图1.23所示。
图1.23 Visual Studio Code打开工程目录（1）
如图1.23中的箭头所示，单击“打开文件…”后会打开一个“文件选择对话框”，选中之前创建好的vueprojects工程目录就可以了，效果如图1.24所示。
图1.24 Visual Studio Code打开工程目录（2）
如图1.24中的箭头所示，已经能看到之前【代码1-1】所创建的commandline.js文件。那么，如何通过Visual Studio Code工具运行该JavaScript脚本文件呢？
这里，需要在Visual Studio Code中安装一个名称为“Code Runner”的插件，之后就能运行JavaScript脚本文件，具体安装方法如下：
在左侧快捷工具按钮列表中找到“扩展（Ctrl+Shift+X）”按钮，界面效果如图1.25所示。
图1.25 Visual Studio Code安装扩展
如图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 通过Code Runner运行JavaScript脚本文件（1）
如图1.26中的箭头所示，在快捷菜单中单击Run Code菜单项，Visual Studio Code开发工具会弹出一个“输出”界面窗口，显示JavaScript代码调试运行的输出结果，效果如图1.27所示。
图1.27 通过Code Runner运行JavaScript脚本文件（2）
如图1.27中的标识所示，调试运行的输出结果与图1.16所示的结果是一致的，说明Visual Studio Code开发工具的Code Runner插件运行方式，可以完美替代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 通过“npm init -y”命令初始化项目
图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 通过npm命令安装Webpack
如图1.29中的箭头和标识所示，已经成功安装了webpack@5.88.2和webpack-cli@5.1.4开发包，其中“@”符号后面标识的是开发包的版本号。
至此，通过Webpack工具构建Node.js应用程序框架就基本完成了。
目前，有多种开发工具可以支持Node.js应用的开发，比如jetBrains WebStorm、Eclipse、Visual Studio Code等。这些开发工具原则上是“条条大路通罗马”的，相互间各有优势，并无优劣之分。在本书中，我们选择Visual Studio Code开发工具，其中一个原因也是为了配合后面讲解Vue.js的相关内容。
下面，通过VS Code打开刚刚创建的Node应用目录（vueprojects），效果如图1.30所示。
图1.30 通过Visual Studio Code管理Node应用（1）
查看图1.30左上方的方框标识，里面显示了Node应用的目录结构，具体内容如图1.31所示。
图1.31 通过Visual Studio Code管理Node应用（2）
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所示。
图1.32 通过Visual Studio Code新建HTML页面文件（1）
单击“新建文件”图标后会自动创建一个文件。注意，这个文件没有名称，也没有文件类型后缀，全部需要设计人员手动输入（index.html），这点可能与其他开发平台差异比较大。因此，该新建文件是一个空白的HTML5网页，如图1.33所示。
图1.33 通过Visual Studio Code新建HTML页面文件（2）
新建的index.html网页全部空白，没有一行默认生成的代码。此时，读者如果质疑Visual Studio Code开发工具，那就大错特错了。Visual Studio Code为设计人员提供了很强大的自动代码生成功能，下面演示如何操作。
在空白页面最开始处输入字符“!”，会弹出一个快捷输入方式，如图1.34所示。
图1.34 通过Visual Studio Code新建HTML页面文件（3）
如图1.34中箭头所示，此时会弹出一个快捷输入方式，里面的列表菜单中有一个“!”选项。注意，后面的提示信息为“Emmet Abbreviation”，说明该功能是由Emmet插件所提供的。这个Emmet插件可谓是大名鼎鼎，在很多集成开发工具或轻量级代码编辑器中都有其身影，是一款非常好用的代码自动生成工具。因此，Visual Studio Code就将Emmet插件内置其中，用户不用再单独安装该插件了。
下面看一下Emmet插件的使用方法，选中“!”选项后直接按回车键或Tab键，效果如图1.35所示，Emmet插件直接在index.html文件中自动生成了一个HTML 5网页模板。
图1.35 通过Visual Studio Code新建HTML页面文件（4）
在应用程序根目录下创建一个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所示。
图1.36 在浏览器中运行HTML页面
图1.37 创建“分发（dist）”目录结构
如上图中的箭头所示，我们还需要将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库
如图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.39 通过Webpack打包Node应用
图1.40 更新“分发（dist）”目录结构
如图1.40中的箭头所示，在“分发（dist）”目录下自动生成了一个main.js脚本文件，这就是通过Webpack工具打包生成的bundle包文件。下面，让我们见识一下这个main.js脚本文件的庐山真面目，如图1.41所示。
图1.41 在浏览器中运行HTML页面
main.js脚本文件是一个经过代码压缩的打包文件（提高运行速度），但代码阅读起来是相当有难度的。另外，还可以看到main.js脚本文件将Lodash包也一起合并压缩进去了。
再次测试这个Node应用，在浏览器中打开index.html页面文件，效果如图1.42所示。
图1.42 在浏览器中运行HTML页面
如图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）根目录下。
图1.43 Webpack配置文件webpack.config.js
下面简单配置一下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.44 通过Webpack配置文件打包Node应用
图1.45 再次更新“分发（dist）”目录结构
如图1.45中的箭头所示，在“分发（dist）”目录下自动生成了一个bundle.js脚本文件，这就是通过Webpack工具配置文件重新打包生成的bundle包文件。这个重新生成的bundle.js脚本文件是符合ES 6标准规范的，由于代码比较长，这里就不做演示了。
此时可以再次测试一下这个Node应用，仍旧是在浏览器中运行index.html页面文件，效果如图1.46所示。
图1.46 在浏览器中运行HTML页面
如图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 再次运行npm run dev命令进行打包
如图1.47中的标识所示，命令行终端中给出了Node应用服务端运行地址的提示信息（http://localhost:8080/）。通过浏览器直接访问该地址就能测试该项目了，效果如图1.48所示。
图1.48 在浏览器中测试Node应用
如图1.48中的箭头所示，页面打开后显示的并不是预期的运行效果，而是项目的目录结构。这里，需要再次单击“分发（dist）”目录才可以运行index.html页面。
下面，我们体验一下webpack-dev-server插件的热加载功能。具体方法就是修改更新一下源文件（index.js）代码，然后注意观察一下命令行终端的变化，如图1.49所示。
图1.49 通过webpack-dev-server实现热加载
如图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 浏览器页面热更新
如图1.50中的箭头所示，浏览器页面的内容通过“热更新”功能进行了自动更新。至此，关于使用Visual Studio Code开发工具通过Webpack开发Node应用的基本方法，这里就基本介绍完成了，希望读者能熟练掌握这个集成开发工具。