8 --- ＞devServer

webpack-dev-server 可用于快速开发应用程序

热更新

直接使用6中的代码
修改src/index.js的代码

function add(x,y) {
  return x+y
}

console.log(add(1,2));

这是刷新打印结果并没有，这是因为
我们构建后的代码是之前构建的，然后新输入的内容没有在之前构造的里面
因此，需要查看最新的JS代码，需要重新打包一次才能看到打印信息3

devServer可以帮助我们打包
webpack配置

devServer: {
    contentBase: resolve(__dirname, 'build'),
    //启动gzip压缩
    compress: true,
    //端口号
    port: 3000
  }

安装依赖

cnpm i webpack-dev-server -D

使用命令去启动

npx webpack-dev-server

查看结果

这时还是看不出来热更新的效果
修改dom结构
查看到正在编译

会监视src下面的代码，检测到变化就自动编译

添加自动打开浏览器
添加open配置
open:true

完整配置
devServer: {
//项目构建后路径
contentBase: resolve(__dirname, ‘build’),
//启动gzip压缩
compress: true,
//端口号
port: 3000,
//自动打开浏览器
open:true
}

删除build文件夹

运行依旧可以成功执行，但是没有了build的相关文件
是因为执行的命令是

npx webpack-dev-server

没有任何的输出

关于webpack5.0,使用webpack-dev-server时,无法自动刷新的问题

target: 'web'
webpack serve --inline --content-base --hot --open Chrome.exe