一文大白话讲清楚webpack进阶——5——dev-server原理及其作用

1. webpack的作用

• webpack的作用我们之前见过了，不懂的可以看起系列文章
• 一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建一直到一文大白话讲清楚webpack基本使用——18——HappyPack
• 一言概之，webpack就是把我们项目中的各个模块（js Module，css等都视为模块）进行打包
• 那具体怎么打包的呢
• 通过AST

2. dev-server的作用

• 开开发阶段，我们想要预览页面效果，就需要启动一个一个服务器伺服编译出来的静态资源，帮助我们实现自动打包，自动刷新等，提高开发效率，webpack-dev-server就是干这个的活

3. dev-server的原理

• webpack-dev-server基于express框架构建了一个HTTP服务，通过webpack-dev-middleware和memory-fs模块将打包资源输出到内存中去，当浏览器请求文件吃，webpack-dec-server会监视这些请求，并将他们路由到内存中的虚拟文件系统中对应的文件，这样就可以直接从内存中提供文件，而不需要访问实际的物理文件。

3.1 啥是webpack-dev-middleware

• webpack-dev-middleware是一个wrapper，理解为容器，他会将webpack编译后的文件存储到内存中去，然后用户在访问express服务器时，将内存中对应的资源输出返回。
• 可以把它看成是一个内存型的文件系统，目录与内存中的产物会形成映射关系
• 当我们访问express时，express会将请求转发给webpack-dev-middleware，webpack-dev-middleware会根据映射关系，找到对应的文件，再讲文件内容返回给express

3.2 HMR

• 为我们提供无须刷新就可以实施看到页面效果的动态服务，本质是websocket通信
• 看我这篇文章
• 一文大白话讲清楚webpack基本使用——6——热更新及其原理