1. webpack-dev-server

• 让webpack监听项目源代码的变化，从而进行自动打包构建
• 热更新（不用每次修改代码后再重新构建一次）

1. 安装 npm i webpack-dev-server@3.11.0 -D
2. 配置：

//package.json
"script":{
	//"dev":"webpack",
	"dev":"webpack server",
}

3. 执行命令 npm run dev,再次修改代码，发现可以打包成功，但是页面并没有更新！！！（原理在文章最后！）。

<!--<script src="../dist/bundle.js"></script>-->
<script src="/bundle.js"></script>

原理：webpack-dev-server 打包的文件去哪了???

1. 当配置了webpack-dev-server 之后，打包生成的文件存放到了内存中，而不是磁盘中（这么做是为了提高实时打包的速度）
2. 打包生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的
3. 所以需要再修改 index.html
<script src="/bundle.js"></script> / 斜线代表项目的根目录

2. html-webpack-plugin

• html插件
• 比如：项目运行在8080端口，打开之后还需要在地址栏中输入 localhost:8080/src/index.html才能打开项目首页,但我们想打开8080,就能看到index.html页面，那么我们需要把index.html文件复制到根目录下

1. 安装 npm i html-webpack-plugin@5.3.2 -D
2. 配置：

//webpack.config.js
//1. 导入html插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
//2. 创建html实例对象
const htmlPlugin = new HtmlPlugin({
	template:'./src/index.html',//源文件
	filename:'./index.html'，//指定源文件生成的文件 存放的地址
})
//3. 挂载html实例对象
module.exports = {
	mode:'development',
	.....
	plugins:['htmlPlugin'],
}

3. 注：
   1. 配置到根目录下的index.html也是存放在内存中，在项目文件夹中看不到，但在浏览器中输入地址 locahost:8080中可以看到页面效果)
   2. 浏览器中右键点击查看源代码，发现多了一行代码<script src="bundle.js"></script>,所以index.html就不用手动引入打包后的文件了

未完。。。