我们通过webpack进行打包项目时，会存在一些问题，当我们在终端中运行打包完成后，如果再次修改源代码，就需要重新在终端中运行打包，所以我们可以通过插件实时更新
一、插件webpack-dev-server
①安装插件：在要打包的项目根目录下打开终端，运行下面命令：
npm install webpack-dev-server@3.11.2 -D
安装成功后再在package.json的scripts中的dev中的值修改为如下：
"scripts" : {
"dev" : " webpack serve"
}
然后就可以在终端中运行npm run dev(这里的dev对于上面package.json的scripts中的dev值，你哪里是什么就运行什么)
运行成功如下：
然后就复制上面的端口号，在浏览器打开，即可实时看到更新效果
二、html-webpack-plugin插件
webpack-dev-server插件存在一个问题，就是需要自己手动复制端口号，在浏览器中打开，所以我们新增一个html-webpack-plugin插件来解决这个问题
①安装：在终端中运行下面命令：
npm install html-webpack-plugin@5.3.2 -D
②配置：在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.引用
module.exports = {
mode:'development',
devServer:{
open:true
port:80 //端口号，可写可不写
host:'127.0.0.1' //主机号，可写可不写
}
}
