4.使用webpack-dev-server工具实现自动打包编译的功能

使用webpack-dev-server这个工具，来实现自动打包编译的功能

1.运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖

或者运行 cnpm i webpack-dev-server -D 安装

2.安装完毕后，这个工具的用法，和webpack命令的用法，完全一样

打包运行命令：webpack-dev-server,会报错

3.由于，我们是在项目中，本地安装的 webpack-dev-server，所以，无法把它当作脚本命令，在powershell终端中直接运行；（只有那些安装到全局 -g的工具，才能在终端中正常执行）。但是，webpack-dev-server只能本地安装

在package.json 的scripts节点中配置要运行的命令

"scripts":{
   "dev":"webpack-dev-server"
}

这时，控制台执行

npm run dev

相当于执行

webpack-dev-server

如果安装包的过程出错，可以删除node_modules，再重新安装

执行以下命令装包

cnpm i

4.注意：webpack-dev-server这个工具，如果想要正常运行，要求，在本地项目中，必须安装webpack



peerDependencies WARNING webpack-dev-server@^3.9.0 requires a peer of webpack@^4.0.0 but none was installed

cnpm i webpack -D

5.webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放到实际的物理磁盘上，而是，直接托管到了电脑的内存中，

所以，我们在项目根目录中，根本找不到这个打包好的bundle.js;

6.我们可以认为，webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到了咱们项目的根目录中，虽然我们看不到它，

但是，可以认为，和dist、src、node_modules 平级，有一个看不见的文件，叫做bundle.js