webpack面试题

• webpack的构建流程
  webpack是一个串行流程，启动到结束依次执行：
  1）初始化参数：webpack.config.js文件以及npm init
  2）开始编译：初始化Compiler对象，加载插件，执行对象的run方法
  3）确定入口：entry
  4）编译模块：从entry出发，调用所有配置的loader对模块进行翻译，再找到该模块所依赖的模块，递归本步骤直至所有入口依赖的文件经过处理
  5）完成模块编译：得到每个模块被翻译后的最终内容，以及依赖关系
  6）输出资源：根据入口和模块之间的依赖关系，组装成一个个chunk，再把每个chunk转换为单独的文件输出
  7）输出完成：根据配置确定输出路径和文件名，把文件内容写入至文件系统

webpack流程详解
webpack整体流程图

• shell和config解析
  1）在命令行输入webpack后，操作系统都会调用shell脚本./node_modules/bin/webpack，这个脚本会去调用./node_modules/webpack/bin/webpack.js，并追加输入的参数，如：-p，-w
  2）在webpack.js中通过optimist将用户配置的webpack.config.js和shell脚本传递的参数整合成options对象，传入下一个流程的控制对象中
• optimist
  optimist库和commander库一样：实现node命令行解析

var optimist = requir('optimist')
optimist.boolean('json').alias('json','j').describe('json')
...

• webpack的热更新
  webpack的热更新机制（Hot Module Replacement）：不需要刷新浏览器而将新变更的模块替换掉旧的模块
  工作原理
  
  1.第一步在Webpack的watch模式下，文件系统发生修改，webpack监听到文件变动，根据配置文件对模块重新编译打包，并将打包后的代码通过js对象保存在内存
  2.第二步是webpack和webpack-dev-server之间的接口交互，webpack-dev-middleware调用webpack暴露的API对代码变化监听，并将结果告诉webpack，之后将代码打包至内存
  3.第三步是webpack-dev-server监控文件变化，配置中devServer.watchContentBase 设为 true，Server会监听静态文件的变化，变化后通知浏览器进行刷新 live reload
  4.webpack-dev-server 代码的工作：通过sock.js在浏览器端和服务器端建立一个websocket长连接，将webpack编译打包的各个阶段的状态信息传递给浏览器端，浏览器根据这些socket消息进行不同的操作。服务器传递的主要信息就是新模块的hash值，后面根据这hash值进行热替换
  5.webpack-dev-server/client 不会执行热模块操作，不会请求执行更新，而是把这些操作交还给webpack，webpack/hot/dev-server，根据 webpack-dev-server/client 传递的信息，以及dev-server配置决定是刷新浏览器还是模块热替换
  6.HotModuleReplacement.runtime 是客户端 HMR 的中枢，接收到新模块的hash值，通过 JsonpMainTemplate.runtime向webpack-dev-server端发送ajax请求，服务器端返回json，该json包含了所有要更新模块的hash值，获取到更新列表后，该模块再次通过jsonp请求，获取最新的模块代码
  7.HotModulePlugin 将会对新旧模块进行对比，决定是否更新，检查模块之间的依赖关系
  8.当HMR失败后，退回至第三步live reload

• 如何用webpack来优化前端性能
  优化webpack的输出结果
  1）压缩代码：利用webpack的UglifyJsPlugin和ParallelUglifyPlugin压缩js文件
  2）利用CDN（内容分发网络）加速
  3）启动webpack时 加入--optimize-minimize
  4）将代码分块