webpack-开发服务器-热更新-自动弹窗

提示：webpack-开发服务器-热更新-自动弹窗

---

前言

提示：学习 webpack - 开发服务器

---

一、webpack-开发服务器

如下（示例）：

1.webpack - 开发服务器 - 为何学

目标

开发时, 快速自动打包查看效果

问题

每次修改代码, 重新打包, 才能看到最新的效果

实际工作中, 打包非常费时 (10-30s) 之间, 影响开发效率

原因

1. 构建入口和所有模块依赖关系图
2. 磁盘读取对应的文件到内存, 才能加载
3. 用对应的 loader 进行处理和翻译
4. 将处理完的内容, 输出到磁盘指定文件内
5. 以后代码变化, 从1重新开始

代码演示

复制上一个项目

写几行代码, 想要看打包后运行效果, 打包 ing…

又改了几行代码, 想看打包后运行效果, 重新打包 ing…(2000 Years later…)

小结

1. 为何要学webpack的开发服务器?

   答案
   • 因为webpack每次打包很久, 甚至只改几行代码, 也要从0打包

2.webpack - 开发服务器 - 热更新

目标

下载webpack-dev-server, 启动一个开发服务器, 用于快速开发应用程序

步骤

webpack-dev-server文档

1. 构建入口和所有模块依赖关系图
2. 磁盘读取对应的文件到内存, 才能加载
3. 用对应的 loader 进行处理和翻译
4. 将处理完的内容, 输出到内存里而非磁盘上
5. 以后代码变化, 自动更新打包变化的代码, 显示到浏览器上

步骤

1. 下载包

   yarn add webpack-dev-server@3.11.2 -D
   

2. 配置自定义命令serve