前端基础知识学习第九节(Webpack篇)

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