webpack入门（十）-- 搭建开发服务器并实现自动化热更新

1、为什么样使用热更新？

因为，每次修改我们的文件，都需要重新编译后，才能查看效果。
也就意味着每次代码变更，都要运行编译指令，效率低。
所以，我们需要一个开发中自动监听文件变更并且自动编译的工具。
这里介绍的是webpack-dev-server

2、如何实现热更新？

我们通过一个工具，webpack-dev-server，去搭建开发服务器，实现自动化更新。

1、下载依赖

//搭建开发服务器，实现热更新
npm i webpack-dev-server -D

2、配置

注意，webpack-dev-server不是插件，不是在插件里面配置的。

3、验证热更新

之前编译的指令，和启动开发服务器的指令不一样：

// 启用webpack编译项目
npx webpack 
//启动开发服务器
npx webpack serve

运行指令，查看效果正常

注意：

并且当你使用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下。