webpack原理
# webpack 原理总结
# webpack 的打包过程
初始化参数 从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
开始编译 用上一步得到的参数初始 Compiler 对象，加载所有配置的插件，通 过执行对象的 run 方法开始执行编译
确定入口 根据配置中的 Entry 找出所有入口文件
编译模块 从入口文件出发，调用所有配置的 Loader 对模块进行编译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
完成模块编译 在经过第 4 步使用 Loader 翻译完所有模块后， 得到了每个模块被编译后的最终内容及它们之间的依赖关系
输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk,再将每个 Chunk 转换成一个单独的文件加入输出列表中，这是可以修改输出内容的最后机会
输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，将文件的内容写入文件系统中。
# webpack 热更新原理
用 webpack-dev-server 启动一个服务之后，浏览器和服务端是通过 websocket 进行长连接，webpack 内部实现的 watch 就会监听文件修改，只要有修改就 webpack 会重新打包编译到内存中，然后 webpack-dev-server 依赖中间件 webpack-dev-middleware 和 webpack 之间进行交互，每次热更新都会请求一个携带 hash 值的 json 文件和一个 js，websocker 传递的也是 hash 值，内部机制通过 hash 值检查进行热更新， 至于内部原理，因为水平限制，目前还看不懂
参考：http://www.muyiy.cn/question/tool/70.html (opens new window)
# Webpack Proxy 工作原理
通过 webpack-dev-server 提供一个代理服务器实现跨域
底层通过 http-proxy-middleware 这个 http 代理中间件，实现请求转发给其他服务器
参考：https://www.cnblogs.com/houxianzhou/p/14743623.html (opens new window)
# Webpack 打包的具体原理
- 利用 babel 完成代码转换,并生成单个文件的依赖
- 从入口开始递归分析，并生成依赖图谱
- 将各个引用模块打包为一个立即执行函数
- 将最终的 bundle 文件写入 bundle.js 中
# webpack 懒加载原理
路由懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
懒加载前提：进行懒加载的子模块（子组件）需要是一个单独的文件
懒加载（按需加载）原理分为两步：
- 将需要进行懒加载的子模块打包成独立的文件（children chunk）；
webpack 实现：
(1) ES6 的动态加载模块 - import（）
通过 import()引用的子模块会被单独分离出来，打包成一个单独的文件。
(2) webpack 提供的 require.ensure()实现懒加载：
- 借助函数来实现延迟执行子模块的加载代码；
函数特性：无论使用函数声明还是函数表达式创建函数，函数被创建后并不会立即执行函数内部的代码，只有等到函数被调用之后，才执行内部的代码。
# import 被 webpack 编译
问题：import moduleName from 'xxModule'和 import('xxModule')经过 webpack 编译打包后最终变成了什么？在浏览器中是怎么运行的？
webpack 将所有的 import moduleName from 'xxModule'都变成了一个 Map 对象，key 为文件路径，value 为一个可执行的函数，而函数内容其实就是模块中导出的内容，
异步方法（import('xxModule')）比较特殊一些，它会单独打成一个包，采用动态加载的方式，
参考：https://www.cnblogs.com/goloving/p/14075523.html (opens new window)
# 文章
- webpack 系列--浅析 webpack 的原理
https://www.cnblogs.com/chengxs/p/11022842.html (opens new window)