09.Webpack

1.DevServer和VueCLI

1.1 搭建本地服务器(原因)

1. 目前我们开发的代码，为了运行需要有两个操作：

1. 操作一： npm run build，编译相关代码；
2. 操作二：通过live server或者直接通过浏览器，打开index.html代码，查看效果；

2. 这个过程影响开发效率，希望：文件发生变化，自动完成 编译和展示；
3. 为了完成自动编译，webpack提供的几种可选方式：

1. webpack watch mode；
2. webpack-dev-server(常用)；
3. webpack-dev-middleware；

1.2 wabpack watch mode

1. webpack提供了watch模式：

1. 在该模式下，webpack依赖图中的所有文件，只要有一个文件发生了更新，那么代码将会重新编译；
2. 我们不需要手动运行 npm run build 指令了；

2. 开启watch的两种方式：

1. 方式一：在导出的配置中，添加 watch：true；
2. 方式二：在启动webpack的命令中，添加 --watch的标识；
   

3. webpack-cli 会对 --watch这个选项变为配置watch：true；

当运行 npm run build 之后，如果有一个文件改变会自动重新编译，自动刷新的功能是live-server提供的；

4. 

1.3 wabpack-dev-server

1. 上面的方式可以监听到文件的变化，但是事实上它本身是没有自动刷新浏览器的功能；

1. 目前我们可以在VSCode中使用live-server完成这样的功能；
2. 我们希望不适用live-server，可以具备 **live reloading(实时重新加载)**的功能；

2. 安装webpack-dev-server

npm install webpack-dev-server -D

3. webpack3 以前 需要在 webpack-dev-server中启动，现在因为有webpack-cli，所以可以直接进行使用；

4. 修改配置文件；
   

5. http://localhost:8080 这是DevServer搭建的一个本地服务器，基于express框架搭建的一个本地服务器；

6. webpack serve 也是通过webpack-cli进行解析；

7. webpack-dev-server 编译和打包之后的代码不会做输出，所以build中的文件夹是空的；

8. webpack-dev-server 为了提高打包效率 将打包之后的文件直接传入到内存中；

1. 事实上webpack-dev-serve使用了一个库叫memfs(内存的文件系统，memory-fs webpack)；

9. devServer中的 contentBase配置
10. 将源代码通过devServer进行打包，打包之后将所有静态资源放到内存里面memfs，开启一个express的服务，浏览器通过localhost:8080去访问服务器。访问服务器之后下载 index.html 文件，配置一个文件夹public，使用contentBase指定文件夹public，如果浏览器访问服务器下载的index.html其中在打包中没有找到静态资源，会去pulbic文件夹中去寻找。
11. 开发阶段(contentBase)，打包阶段(copyWebpackPlugin)

1.4 认识热模块替换(HMR)

1. 什么是模块热替换？

1. HMR全称Hot Module Replacement，翻译为模块热替换；
2. 模块热替换是指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面；

2. 浏览器总是刷新并不是很友好(需要保留页面的某些状态的时候)；
3. 非常消耗性能(在大型工程中)；
4. HMR通过以下几种方式，提高开发速度：

1. 不重复加载整个页面，这样可以保留某些应用程序的状态不丢失；
2. 只更新需要变化的内容，节省开发时间；
3. 修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式；

5. 如何使用HMR？

1. 默认情况，webpack-dev-server已经支持HMR，我们只需要开启即可；
2. 在不开启HMR的情况下，修改源代码，整个页面自动刷新，使用的是live reloading

6. 开启HMR
   
7. webpack 默认情况下 不清楚哪个模块要做热替换；
8. 如果想让某个文件可以做热替换；

1. module.hot.accept( “模块热替换路径”，“回调函数 监听替换之后的动作” )
   

1.5 框架的HMR

1. 开发项目中，需要手动写入module.hot.accept相关API?

1. 开发中修改组件，进行热更行，如何操作？
2. vue使用vue-loader，这个loader支持vue组件的HMR；
3. react使用 React Hot Loader，实时调整React组件(目前官方弃用，改为react-refresh)；

1.6 HMR的原理

1. HMR的原理

1. webpack-dev-server会创建两个服务：提供静态资源的服务(express)和Socket服务(net.Socket);
2. express server负责直接提供静态资源的服务(打包后的资源直接被浏览器请求和解析)；

2. HMR Socket Server，是一个socket的长连接：

1. 长连接有一个最好的好处是建立连接后双方可以通信(服务器可以直接发送文件到客户端)；
2. 当服务器监听到对应的模块发生变化时，会生成两个文件.json(manifest文件)和.js文件(update chunk)；
3. 通过长连接，可以直接将这两个文件主动发送给客户端(浏览器);
4. 浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新。
   

3. Http连接，短连接

客户端发送http请求 -> 和服务器建立链连接 -> 服务器做出反应 -> 做出反应

4. Socket长连接

即时通信，微信、直播
长连接经过各种各样的连接之后建立一条通道，这条通道通过心跳包保持是否存在