工程化
-
common.js跟es6 module的区别
二者的引用方式不同，common.js是用require,es6 module是用import common.js引用的是值的拷贝，是动态加载的，就是在运行的时候才知道引用的值，引用之后改变引用的值，对之前的函数里的值没有影响。 es6 module是静态加载的，引用的是值的引用，改变引用的值，会对源文件有影响。
-
webpack-dev-serve的原理
-
source-map的原理
-
webpack 热更新的原理
答：
Hot Module Replacement，简称HMR，现象：当我们没有改动文件去保存，会请求一个json文件，当我们修改文件去保存，但是当前的页面没有引用到这个文件，也只有一个json文件，如果当前页面用到，则还会多一个js文件。
它的主要工作原理是
- 启动
webpack，生成compiler实例。compiler上有很多方法，比如可以启动 webpack 所有编译工作，以及监听本地文件的变化。
-
使用
express框架启动本地server，让浏览器可以请求本地的静态资源。 -
本地
server启动之后，再去启动websocket服务，如果不了解websocket，建议简单了解一下websocket速成。通过websocket，可以建立本地服务和浏览器的双向通信。这样就可以实现当本地文件发生变化，立马告知浏览器可以热更新代码啦！
它的具体源码分析：
webpack的serve.js启动，首先会创建一个express服务，这个服务用于获取前端静态资源，开启这个服务之后，会创建一个socket服务，这个socket服务通过websocket与浏览器进行双向链接。
同时serve.js会开启监听，监听到编译结束之后，会通过socket服务发送ok跟hash事件，浏览器通过监听这两个事件，去触发reloadAPP方法，这个方法首先发出webpackHotUpdate消息返回给webpack处理，socket只管通信，不直接进行check，dev-serve通过check如果发现有更新，则会利用上一次保存的hash值，调用hotDownloadManifest发送xxx/hash.hot-update.json的ajax请求，有文件更新的话调用hotDownloadUpdateChunk发送xxx/hash.hot-update.js 请求，通过JSONP方式，最后通过hotApply热更新模块替换。
- webpack的生命周期
Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：
初始化参数从配置文件和 Shell 语句中读取与合并参数，得出最终的参数开始编译用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译确定入口根据配置中的 entry 找出所有的入口文件编译模块从入口文件出发，调用所有配置的 Loader 对模块进行编译，再找出该模块被编译后的最终内容以及它们之间的依赖关系完成模块编译在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系输出资源根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会输出完成在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统
在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
