Node.js 使用webpack-dev-server工具运行项目实现自动打包编译的功能

npm install -g cnpm --registry=https://registry.npm.taobao.org 安装 cnpm 模块

使用 cnpm 命令
cnpm i webpack-dev-server -D 安装 webpack-dev-server 把这个工具安装到项目的本地开发依赖，这个 工具的用法 和 webpack 命令的用法，完全一样。由于，我们是在项目中，本地安装的 webpack-dev-server , 所以，无法把它当做 脚本命令，在powershell 终端中直接运行；（只有那些 安装到 全局 -g 的工具，才能在 终端中正常执行）

使用 npm run dev 命令运行项目，注意事项

1. 要在 package.json 文件中 添加 “dev”: "webpack-dev-server"
   
2. 检查相关依赖 webpack-cli 和 webpack 是否安装
   注意，webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中，必须安装 webpack
   如果没有安装使用如下命令进行安装

• npm install webpack-cli -g
• npm install --save-dev webpack
  在安装以上2个模块出现错误可参考：
  https://blog.csdn.net/qq_44989881/article/details/107711581

使用 npm run dev 运行项目

运行成功后会出现：
S M:\Node.js\07.webpack\2.webpack之plugin配置和使用\1.webpack-dev-server的基本使用\webpack-study> npm run dev

> [email protected] dev M:\Node.js\webpack
> webpack-dev-server

Project is running at http://localhost:8080/
webpack output is served from /
Hash: 8c933a449d24372a4e27
Version: webpack 3.12.0
Time: 597ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  624 kB       0  [emitted]  [big]  main
   [1] multi ./node_modules/[email protected]@webpack-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {0} [built]
   [2] ./node_modules/[email protected]@webpack-dev-server/client?http://localhost:8080 7.93 kB {0} [built]
   [3] ./node_modules/url/url.js 23.3 kB {0} [built]
   [4] ./node_modules/node-libs-browser/node_modules/punycode/punycode.js 14.7 kB {0} [built]
   [6] ./node_modules/url/util.js 314 bytes {0} [built]
   [7] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
  [10] ./node_modules/[email protected]@strip-ansi/index.js 161 bytes {0} [built]
  [11] ./node_modules/[email protected]@ansi-regex/index.js 135 bytes {0} [built]
  [12] ./node_modules/[email protected]@loglevel/lib/loglevel.js 8.61 kB {0} [built]
  [13] ./node_modules/[email protected]@webpack-dev-server/client/socket.js 1.08 kB {0} [built]
  [15] ./node_modules/[email protected]@webpack-dev-server/client/overlay.js 3.67 kB {0} [built]
  [21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [23] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [25] ./src/main.js 4.21 kB {0} [built]
  [26] ./node_modules/jquery/dist/jquery.js 288 kB {0} [built]
    + 12 hidden modules

Project is running at http://localhost:8080/ ：浏览器访问http://localhost:8080/ 即可看到运行的项目，并对项目中的文件可以进行访问。

注：
webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到实际的物理磁盘上；而是，直接托管到了电脑的内存中，所以，我们在项目根目录中，根本找不到这个打包好的 bundle.js；我们可以认为，webpack-dev-server 把打包好的 文件，以一种虚拟的形式，托管到了项目的 根目录中，虽然我们看不到它，但是，可以认为 和 dist src node_modules 平级，有一个看不见的文件，叫做 bundle.js。
在项目中直接引用根目录的 bundle.js 即可。

每次修改文件项目中开发文件进行保存时，进行项目都会同步更新，无需重启和重新打包编译。

webpack: Compiling...
Version: webpack 3.12.0
Time: 18ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  624 kB       0  [emitted]  [big]  main
  [21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [25] ./src/main.js 4.21 kB {0} [built]
    + 25 hidden modules
webpack: Compiled successfully.

使用 npm run dev2 运行项目

"dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot",

• open：每次运行项目自动打开浏览器
• port：项目运行占用的端口号
• contentBase ：项目启动首次访问的目录
• hot：iframe 热替换模式，减少大量代码重复更新