这是我参与8月更文挑战的第31天，活动详情查看：8月更文挑战
webpack是什么？
- 是一个用于现代javaScript应用程序的
静态模块打包工具。 - 当webpack处理应用程序时，会在内部构建一个依赖图，此依赖图对应影射到项目的每个模块，并声称一个或者多个bundle
webpack的核心概念
- 入口：entry
- 输出：output
- loader
- 插件：plugin
- 模式：mode
- 浏览器兼容性(browser compatibility)
- 环境(environment)
webpack的loader和plugin有什么区别？
- loader 用于对模块的源代码进行转换，运行在打包之前。
- plugin 目的在于解决loader无法实现的事情，是对webpack功能的扩展，在整个编译周期内都起作用。
webpack打包流程
初始化参数：从配置文件和shell语句中读取并合并参数，拿到最终的参数；开始编译：用上一步的参数初始化Compiler对象，加载所有配置的插件，执行对象的run方法开始编译；确定入口：根据entry找到所有的入口文件；编译模块：从入口文件出发，调用loader对模块进行翻译，再找出该模块依赖的模块，进行递归本步骤，直到所有的入口依赖的文件都经过处理完成模块编译：使用loader翻译完所有的模块之后，得到了每个模块被翻译后的最终内容和它们之间的依赖关系；输出资源：根据入口和模块之间的依赖关系，组成成一个个包含多个模块的Chunk，再将Chunk转换成一个单独的文件加入到输出列表，这一步是可以修改输出内容的最后机会；输出完成：确定好输出内容之后，根据配置确定输出的路径和文件名，将内容写入到文件系统。
有哪些提高效率的插件
- weboack-merge: 提取公共配置，减少重复配置代码。
- size-plugin: 监控资源体积变化，尽早发现问题。
- HotModuleReplacementPlugin：模块热替换。
- HappyPack: 提升构建速度。
source map 是什么？
- source map 是将编译、打包、压缩后的代码映射回源代码的过程。
- map文件 只要不打开开发者工具、浏览器就不会加载。
webpack热更新原理
-
webpack的热更新又称热替换简称HMR。这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。
-
HMR 核心是：客户端从服务端拉取更新后的文件，准确的说是chunk diff（比较出需要更新的部分）。实际上，WDS（webpack-dev-server）与浏览器之间维护了一个 websocket，当本地资源发生变化时，WDS向浏览器推送更新，并带上构建时的hash，让客户端与上一次资源进行对比。客户端比对出差异好会向WDS发起Ajax请求来获取更改内容，这样客户端就可以再次借助这些信息继续向WDS发起jsonp请求，获取该chunk的增量更新。
