webpack学习之webpack-dev-server与html-webpack-plugin

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

使用webpack-dev-server这个工具，实现自动打包编译。
运行npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
安装完毕后，这个工具的用法跟webpack的用法基本一样。
由于我们是在本地安装的，所以无法把它当做脚本命令，在powershell终端中直接运行（只有安装到全局-g的工具，才能在终端正常运行）。
如果webpack-dev-server想要正常运行，必须在本地项目安装webpack。

在package.json中添加这行代码，–open指运行后可以直接打开浏览器，–port 3000可以修改端口号为3000，–contentBase src可以指定打开的项目地址，–hot指的是数据的热更新。

关于html-webpack-plugin
这个插件的作用：
1、自动在内存中根据指定页面生成一个内存的页面
2、自动把打包好的bundle.js追加到页面中去


当使用html-webpack-plugin之后，我们不再需要手动处理bundle.js的引用路径了，因为这个插件已经帮我们自动创建了一个合适的script，并且引用了正确的路径。