文章目录
- 1 webpack与grunt、gulp的不同?
- 2 与webpack类似的工具还有哪些?谈谈你为什么最终选择(或放弃)使用webpack?
- 3 有哪些常见的Loader?他们是解决什么问题的?
- 4 有哪些常见的Plugin?他们是解决什么问题的?
- 5 Loader和Plugin的不同?
- 6 webpack的构建流程是什么?
- 7 webpack的热更新是如何做到的?说明其原理?
- 8 如何⽤webpack来优化前端性能?
- 9 如何提⾼webpack的打包速度?
- 10 如何提⾼webpack的构建速度?
- 11 怎么配置单⻚应⽤?
1 webpack与grunt、gulp的不同?
三者都是前端构建工具
- gulp和grunt需要开发者将整个前端构建过程拆分成多个任务,并合理控制所有任务的调用关系
- webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件,然后用不同的Loader来处理不同的文件,用Plugin来扩展webpack功能。
2 与webpack类似的工具还有哪些?谈谈你为什么最终选择(或放弃)使用webpack?
同样是基于入口的打包工具还有以下几个主流的:
- webpack:适用于大型复杂的前端站点构建
- rollup:适用于基础库的打包,如vue、react
- parcel: 用于简单的实验性项目,他可以满足低门槛的快速看到效果
3 有哪些常见的Loader?他们是解决什么问题的?
- file-loader:把文件输出到一个文件夹中,在代码中通过相对 URL 去引用输出的文件
- image-lo服务器托管网ader:加载并且压缩图片文件
- babel-loader:把 ES6 转换成 ES5
- eslint-loader:通过 ESLint 检查 JavaScript 代码
4 有哪些常见的Plugin?他们是解决什么问题的?
- CleanWebpackPlugin:在每次构建前清理输出目录(通常是 dist 目录),确保构建结果是干净的。
- TerserPlugin:用于压缩 JavaScript 代码,减少文件大小
5 Loader和Plugin的不同?
- Loader直译为”加载器”。Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
- Plugin直译为”插件”。Plugin可以扩展webpack的功能,让webpack具有更多的灵活性
6 webpack的构建流程是什么?
- 初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数;
- 开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译;
- 确定入口:根据配置中的 entry 找出所有的入口文件;
- 编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;
- 完成模块编译:在经过第4步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系;
- 输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会;
- 输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。
7 webpack的热更新是如何做到的?说明其原理?
- 第⼀步,在 webpack 的 watch 模式下,⽂件系统中某⼀个⽂件发⽣修改,webpack 监听到⽂件变化,根据配置⽂件对模块重新编译打包,并将打包后的代码通过简单的 JavaScript 对象保存在内存中。
- 第⼆步是 webpack-dev-server 和 webpack 之间的接⼝交互,⽽在这⼀步,主要是 dev-server 的中间件 webpack- dev-middleware 和webpack 之间的交互,webpack-dev-middleware 调⽤ webpack 暴露的 API对代码变化进⾏监 控,并且告诉 webpack,将代码打包到内存中。
- 第三步是 webpack-dev-server 对⽂件变化的⼀个监控,Server 会监听这些配置⽂件夹中静态⽂件的变化,变化后会通知浏览器端对应⽤进⾏ live reload。注意,这⼉是浏览器刷新,和 HMR 是两个概念。
- 第四步也是 webpack-dev-server 代码的⼯作,在浏览器端和服务端之间建⽴⼀个 websocket ⻓连接,将 webpack 编译打包的各个阶段的状态信息告知浏览器端,当然服务端传递的最主要信息还是新模块的 hash 值,后⾯的步骤根据这⼀ hash 值来进⾏模块热替换。
- webpack-dev-server/client 端并不能够请求更新的代码,也不会执⾏热更模块操作,⽽把这些⼯作⼜交回给了webpack,决定是刷新浏览器呢还是进⾏模块热更新。
- HotModuleReplacement.runtime 是客户端 HMR 的中枢,它接收到上⼀步传递给他的新模块的 hash 值,它通过JsonpMainTemplate.runtime 向 server 端发送 Ajax 请求,服务端返回⼀个 json,该 json 包含了所有要更新的模块的 hash 值,获取到更新列表后,该模块再次通过 jsonp 请求,获取到最新的模块代码。
- ⽽第 10 步是决定 HMR 成功与否的关键步骤,在该步骤中,HotModulePlugin 将会对新旧模块进⾏对⽐,决定是否更新模块,在决定更新模块后,检查模块之间的依赖关系,更新模块的同时更新模块间的依赖引⽤。
- 最后⼀步,当 HMR 失败后,回退到 live reload 操作,也就是进⾏浏览器刷新来获取最新打包代码。
8 如何⽤webpack来优化前端性能?
- 压缩代码:删除多余的代码、注释、简化代码的写法等等⽅式。
- 利⽤CDN加速:构建过程中,将引⽤的静态资源路径修改为CDN上对应的路径
- 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 –optimize-minimize 来实现
9 如何提⾼webpack的打包速度?
- 外部扩展(externals): 将不怎么需要更新的第三⽅库脱离webpack打包,不被打⼊bundle中,从⽽减少打包时间,⽐如jQuery⽤script标签引⼊
- dll: 采⽤webpack的 DllPlugin 和 DllReferencePlugin 引⼊dll,让⼀些基本不会改动的代码先打包成静态资源,避免反复编译浪费时间
10 如何提⾼webpack的构建速度?
- 多⼊⼝情况下,使⽤ CommonsChunkPlugin 来提取公共代码
- 通过 externals 配置来提取常⽤库
- 使⽤ webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。
- 使⽤ Tree-shaking 和 Scope Hoisting 来剔除多余代码
11 怎么配置单⻚应⽤?
单⻚应⽤可以理解为webpack的标准模式,直接在 entry 中指定单⻚应⽤的⼊⼝即可,这⾥不再赘述多⻚应⽤的话,可以使⽤webpack的 AutoWebPlu服务器托管网gin 来完成简单⾃动化的构建,但是前提是项⽬的⽬录结构必须遵守他预设的规范。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
服务器托管网 电子电器架构 —— 网关测试 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师(Wechat:gongkenan2013)。 老规矩,分享一段喜欢的服务器托管网文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,…