国外优秀的网站设计禁止百度收录的网站
webpack打包流程？
1. 初始化: 启动构建，读取与合并配置参数，加载Plugin，实例化Compiler；
2. 编译: 从 entry出发，针对每个 Module 串行调用对应的 loader 去翻译文件的内容，再找到该 Module 依赖的Module，递归地进行编译处理；
3. 输出:将编译后的 Module 组合成 Chunk，将 Chunk 转换成文件，输出到文件系统中。
loader和plugin到底是什么呢？
loader即文件加载器：用来预处理文件。
plugin即插件：用来增强功能。
比如css-loader, 就是解析CSS文件，并处理CSS中的依赖关系，可以将css都提取出来，如果js中包含css代码，会为其创建一个css文件。
处理一个文件可以使用多个loader，loader的执行顺序和配置中的顺序是相反的，最后一个loader最先执行，第一个loader最后执行。
第一个执行的loader接受源文件作为参数内容，其他的loader接受前一个loader的返回值作为自己的参数，最后一个执行的loader会返回此模块的JavaScript源码。
loader即为文件加载器，操作的是文件，将文件A通过loader转换成文件B，是一个单纯的文件转化过程。
plugin即为插件，是一个扩展器，丰富webpack本身，增强功能 ，针对的是在loader结束之后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，监听webpack打包过程中的某些节点，执行广泛的任务。
webpack 在编译代码过程中，会触发一系列 Tapable 钩子事件，插件所做的，就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样，当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了。
webpack热更新如何实现的？HMR
Hot Module Replacement，可以理解为模块热替换，指在应用程序运行的过程中，替换、添加、删除模块，而无需重新刷新整个应用。
具体过程如下：
1. webpack在watch模式下，利用webpack-dev-server 和 webpack 之间的接⼝交互，监听文件变化，如果更改内容，就会将变化的内容重新编译，存在内存里；
2. 通过 sockjs（webpack-dev-server 的依赖）在浏览器端和服务端之间建⽴⼀个 websocket ⻓连接，将 webpack 编译打包的各个阶段的状态信息告知浏览器端，同时也包括 Server 监听静态⽂件变化的信息。浏览器端根据这些 socket 消息进⾏不同的操作。服务端传递的最主要信息还是新模块的 hash 值，后⾯的步骤根据这⼀ hash 值来进⾏模块热替换；
3. HMR的 runtime 拿到了更新后的hash只，会向server端发送请求获取更新列表，然后再发送一次请求获取所有更新内容的代码；
4. 将新旧模块进行对比，决定是否更新，如果确定更新，就会检查模块之间的依赖关系，更新依赖引用；
5. 当HMR失败后，会触发live reload，刷新页面，获取最新的chunk。
- 通过webpack-dev-server创建两个服务器：提供静态资源的服务（express）和Socket服务
- express server 负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）
- socket server 是一个 websocket 的长连接，双方可以通信
- 当 socket server 监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk）
- 通过长连接，socket server 可以直接将这两个文件主动发送给客户端（浏览器）
- 浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新