1.
babel的stage都有哪些值，分别代表什么含义？
答案：
我们在日常的开发中会用babel把ES6代码编译成浏览器支持的ES5代码，针对babel的一些配置在通常.babelrc文件中，其中有一个配置选项就是"stage-0"、
"stage-1"、"stage-2"、"stage-3"，他们分别代表的含义是：
"stage-0": 包含了"stage-1" "stage-2" "stage-3"的所有功能同时还另外支持两个插件 transform-do-expressions和transform-function-bind
"stage-1": 包含了"stage-2" "stage-3"的所有功能
"stage-2": 包含了"stage-3"的所有功能
"stage-3": 支持async和await，这个功能很实用，可以让你以“同步”的思维写代码
在实际的开发中可以根据需要来设置具体stage值，如果想使用大而全的功能就设置成"stage-0"，如果想限制开发人员使用比较新的功能则可以设置成其他stage值，
以上的设置只是针对babel 7.0以前版本，根据官方最新版本7.0的说明，已经废弃了stage的预设
参考：https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
2.
webpack hot reload实现原理？
答案：
1)webpack编译期，为需要热更新的entry注入热更新代码（EventSource通信）
2)页面首次打开后，服务端与客户端通过EventSource建立通信渠道，把下一次的hash返回给客户端
3)客户端获取到hash，这个hash将作为下一次请求服务端hot-update.js和hot-update.json的hash
4)修改页面代码后，webpack监听到文件修改，开始编译，编译完成后，发送build消息给客户端
5)客户端使用hash向服务端发送ajax请求获取hot-update.json，发送GET请求获取hot-update.js
6)hot-update.js插入成功后，执行hotAPI的createRecord和reload方法，获取到Vue组件的render方法，重新render组件，实现UI自动更新
参考：https://www.jianshu.com/p/652fbae768bf
3.
webpack打包慢如何优化？
答案：
1)对公共库文件（Vue、React、React-dom、Axios等）放到CDN服务器，通过script标签单独引用，不通过Webpack进行打包，然后在Webpack
配置里使用expose-loader、externals、ProvidePlugin提供给模块内部使用相应的变量
use: [
{
loader: 'expose-loader',
options: 'Vue'
}
]
externals: {
Vue: 'Vue'
}
new webpack.ProvidePlugin({
Vue: 'Vue'
})
2)使用DllPlugin和DllReferencePlugin，这种方式其实和externals是类似的，主要用于有些模块没有CDN资源可以通过<script>引用的情况，Dll是
动态链接库的意思，实际上就是将这些npm打包生成一个JSON文件，这个文件里包含了npm包的路径对应信息，这两个插件要一起使用
3)提取公共代码，使用CommonsChunkPlugin提取公共的模块，可以减少文件体积，也有助于浏览器缓存
4)使用HappyPack来加速构建，HappyPack会采用多进程去打包构建，使用方式还是蛮简单的，但并不是支持所有loader