写给初级前端的面试经验

最近到了金三银四的跳槽季，不少人都会面临跳槽找工做，而且再过几个月又会到毕业季，愈来愈多的毕业生会面临这个问题。

一样，咱们组由于业务须要（咱们今年却是尚未人员离职，感动╭(╯^╰)╮）须要进行社招，我最近看了很多简历，而且对一些小伙伴进行了电话沟通（电面），对面试找工做有一些本身浅薄的观点

由于我的认为本人的技术仍是很菜的，而且工做经验也没有特别丰富，因此文章内容都是本身一些浅薄的见解观点，如有不对之处，欢迎你们指出，不喜勿喷啊~~~

本篇文章可能只是适用于初级前端，也就是刚毕业的大学生或者毕业 2 年以内的小伙伴，你们酌情阅读~~~

(更新：最后的面试题只是本身总结的一些偏基础的知识~~~ 刚毕业的小伙伴看着也不要有什么压力，不是表明初级前端必须掌握的技能，只是总结出前端面试中比较常见的问题~~~做为面试者，多准备一些有益无害嘛ヾ(=･ω･=)o)

若是你们喜欢，能够点赞或留言我再继续更新面试题~~~~，谢谢你们~~~

简历的格式

简历最好在 1-2 页，最好不超过 2 页。简历真的不是字写的多就好，无论是技术仍是 hr 都很难一个字一个字看你的简历。因此简历上写的必定是精华，须要写你的优点。

我的不太喜欢花里胡哨的简历，排版整齐就好，可是也要注意不要有错别字，虽然都知道是无意的，可是给人的印象确实不怎么好，最起码能够说明你没有仔细看过你本身的简历，同时最好区分大小写，数字/英文和汉字以前要有空格，这个真的是一个好习惯，以前在掘金翻译的时候养成的习惯，如今就算是微信聊天基本上也都会遵循，极大的提升了阅读效率。

最好不要使用在招聘网站上使用模板生成的简历，同时要记得使用 PPT 模板的时候要把没必要要的东西删除啊= =，（收到过简历上第一行是 chapter，也没有姓名，就问他为何没有名字，而后给我回答 chapter 是英文名= = ）

对于已经毕业 2 年以上的，学生时期的经历（学生会主席、拿过什么什么奖学金）就能够不用写了。

简历的内容

前端这块的简历基本上就基本介绍、技术栈、工做经验、项目经验就能够。

基本介绍写明 姓名、电话和邮箱、毕业时间、学历、出生年月就能够（照片有没有都行、政治面貌、籍贯无所谓），电话必定要真实能够打通的电话（真的遇到过到的简历电话和邮箱中间四位是 **** (ಥ_ಥ)），也遇到过打电话打几回打不通的（工做日和非工做日都联系过），即便您再优秀，联系不上也白搭啊(/□＼*)

项目经验和投递的 title 相匹配

我的以为 9102 年了，会用 JQ 基本就能够不用写在简历上了，若是你研究过（不等于看过）JQ 源码能够酌情写上。

同时，你的简历要和你投递的岗位相匹配，好比 title 是资深前端工程师，那么你可以使用 div + css 写页面就能够不用写在简历上了，由于这应该是最最基本的要求。

简历上是要突出你的优点，同时也是自我总结能力的一个体现

简历上写的内容要是你擅长的

面试的题目很大部分都是从你简历里面问的。因此，对于那种本身只是找了篇文章而后实现了下的项目或者只是写过 demo 的，就不要写在简历里面了。

简历里面写的必定是你所有了解的，由于前端的技术栈或者各类各样的框架层出不穷，面试者基本不会问一个你没据说过的框架，那怎么知道你会什么呢，就从你的简历里面看喽～

我就遇到过不少简历写的很好，可是一问就不知道了。好比有个简历上写的“对面向对象编程有深入的理解”，我问：“面向对象的三大要素是什么”，回答：“这个概念性的记不清了。”，好吧，那我换一个：“你平时怎么实现封装和继承”回答：“平时项目中基本用不到” ，“那面向对象和面向过程编程有什么区别呢？” 回答的思路不清晰，磕磕巴巴。对于这种状况，我的以为你最好就不要把“对面向对象编程有深入的理解”写在简历上了，由于若是你不写，我可能还不会问，可是你掌握的水平和“有深入理解”差距仍是蛮大的，这就是一个减分项了。

还有一个是简历中在我的技能和项目的第一个都写的是“用 node 开发我的博客”，恰好我本人最近也在作这块内容，想着问下。而后回答“其实我是在网上找了篇博客跟着实现了下，如今忘记了”

因此说简历上真的要写你很是了解的领域啊！只是听过名次和写写 demo 的话写在简历上反而是减分项。

注意用词

简历中对某项技术的描述通常有如下几个词语：

了解：理解基本概念，有过简单的使用经验 —— “用过” 熟悉：基本操做很熟练，有过密集的使用经验 ——“用得很多” 精通：深刻理解其底层原理及各类实现方式，并有丰富的项目经验——“有研究”

切记准确用词，慎用“精通”！！

电面

收到简历以后咱们通常都会先进行一轮电话面试（每一个公司的流程不同），由于成本比较低嘛，问一些基础问题大概就能够知道面试者的水平在哪一个范围了，和咱们招聘的岗位的匹配程度如何。

同时，我建议面试者被邀现场面试以前最好也进行下电话沟通，若是直接现场面的话最少你要请半天假吧，若是说双方的匹配程度比较低就不用白跑一趟了。

咱们这边电面以基础为主，若是基本可以符合咱们的招聘要求，再约现场面。

我我的认为，基础比较好（不只仅是 js 基础，还有计算机体系基础和编程基础），三大框架熟悉其一并略懂原理 这两点是最起码的，本身用 webpack 配置过项目懂得 webpack 打包原理、学习过框架源码、对性能优化有过实践、对新技术的了解程度 这些都是加分项（由于咱们项目中没有用到 node，node 基本不会问，除非你在简历中写有）。

而且也会考虑面试者的综合素质，主要是表达能力（沟通无碍就好）、性格是否十份内向、回答问题是否条理清晰。

我我的的话会有一个常问的面试题库，而后在电面前根据面试者的简历筛选要问的问题，好比前面说到的，你简历中写有“对面向对象有深入的理解”，那么我就会准备几个面向对象的问题。

总体来讲，电面以后就基本能够肯定了面试者和咱们招聘岗位的匹配程度，在面试的过程当中会记录下面试者的回答状况，对于有明确答案的问题看其是否回答正确，对于开放性问题，看其思路是否清晰。

我我的的话问框架 api 都是一些比较经常使用基础的 api，考察下你使用到什么程度，比较会问一些原理，好比 vue 的双向绑定原理（vue 2.0 和 vue 3.0，两种实现的优缺点）、vue 的 nexttick 原理、diff 算法等。

咱们在电面完以后一般都会问面试者有什么问题想要问咱们的，大部分面试者会问咱们组所作的业务，也会被问到技术方面的问题= =，通常这个环节都是看下面试者有什么诉求的，就是你若是有什么强烈的诉求能够问下。

电面完以后通常不会直接说是否经过，都会说“后续可能还会有其余同事联系您”，可是根据点面的过程，应该本身内心都会有个大概吧= =

关于为何不直接给答案，一方面是处于礼貌:)，一方面是可能当时并不能及时给出结果。

一个比较好的方法就是面试完须要考虑下才能给出答复，而且通常就算面试没有过也不会再给你说没有过。因此默认一周以内若是没有 hr 再联系你，基本就能够认为是面试没有过了。

现场面

通常电面以后咱们会找 hr 小姐姐约现场面试，对于现场面试我并无太多的经验，这里只是给出参考意见。

现场面就看各个面试官的习惯了，有的会继续问一些技术，有的会重视项目经验，咱们这是现场技术面以后要给一个定级，看是否达到招聘要求。

通常状况下是第一轮面试以后若是能给定级那么就找咱们技术 leader 来聊下，把把关，没啥问题再找 hr 小姐姐来聊下。

给刚毕业大学生的一点建议

刚毕业找工做并非全看技术

在刚毕业的时候我会认为找工做是只看技术的，毕竟咱们是技术岗位。

可是如今自身的感受包括也和其余小伙伴聊过以后发现技术有的时候占比也没有想象那么高。

由于其实咱们毕业以后 1 -2 年内并非特别能拉开差距，你们的水平相差都不是特别大。

这个时候可能一些其余的品质更重要，好比你的沟通能力、你的性格、是否踏实。

同时，找工做这个事情，运气和缘分也是很重要的，好比当时的岗位是不是急缺岗位，若是是新增的部门或者恰好有人离职须要补位，这些特殊状况下，可能要求会稍微下降些（绝对不会下降太多）。

因此最好是找团队人员内推，这样对团队的状况会更加了解。

可是我的以为，3 年以后技术水平的差距就会愈来愈大了，而且想要缩短差距也会愈来愈难。

刚毕业尽可能去大公司

其实就和你上大学选择名校仍是通常学校，有些人说不想当大公司的螺丝钉的时候能够先问下本身能不可以进入大公司，不要尚未进入就开始酸。

有能力去而选择不去和去不了是两个概念。

从自身以及周围人的经验而谈，大公司你能学到的东西从各方面都是比小公司强一点的（这里说的小公司不表明某些小而精的公司）。

我的经验而言，大公司并非每一个人都是螺丝钉，作重复的劳动，由于你所对接的部门有不少，你须要和各类各样的前端、后端、产品、设计、QA 接触，每一个人的习惯都不尽相同，也会遇到跨部门合做，不一样部门的技术栈可能会不同，因此，你所接触的东西是多元化的；

相反，小公司所接触的前端、后端、设计和 QA 基本都比较固定，基本上也不会有跨部门合做的需求，而且技术栈相对而言比较固定，使用了一套技术栈基本也不会换，因此你的技术提高视野可能会稍微窄一点。

而且大公司的业务复杂程度和用户数量也是小公司所不能提供的。

说句实在话，简历中有知名互联网公司的工做经验是很加分的，基本都能有个面试资格，由于从某种程度下降了成本，由于既然可以去知名互联网公司，说明确定是有优点的。

不要只会 API，要了解其原理

咱们老大常常给咱们说过的一句话是：“不要只会一些 API 的东西”，如今前端的一个现象是，不少人使用了一些 API，就以为掌握了某些知识。

要注重一些底层知识，一些原理，这才是长远发展的必备技能。

好比在电面的时候问：“一句话概述下什么是 promise”，不少人都回答 promise 的使用方法。

找工做是双向选择的过程，一个好的团队很重要

找工做真的是双向选择的过程，不只仅是公司选择你，也是你选择公司的过程，有能力的话最好找一个好的团队，作的业务是本身喜欢的，最起码不能太反感不是。

其实从面试官你基本也能够判断出该团队的水平，我的的一点见解是，若是你自己还处于成长阶段，若是面试时候问的问题你均可以顺利的回答出，那么该工做你就要慎重考虑下，可能成长空间会小一点。

减小跳槽的频率

关于跳槽频率，这个无论是技术 leader 和 hr 都是考虑的一个问题。

由于前几年，我的感受涨薪的最便捷途径就是跳槽，涨薪幅度会比较高，在一家公司等加薪比较慢。

可是若是你跳槽过于频繁实际上是不利的，我的认为，一年跳槽一次这个频率就有些高了。

京东也是将这点明确有要求的，一票否决制度，五二原则（五年内以内最多在两家公司）

关于学历

如今不少公司的门槛都是本科相关专业毕业，而且之后的要求确定会愈来愈高。

每一个公司要求不同。

以为面试中有些问题工做中用不到

不少人都会有这样的一个问题：以为面试中问的不少问题在实际工做中根本用不到。

我以为你会有这样的问题多是你和这个公司的岗位并不相匹配。

由于当时我面试饿了么的时候，问我了一些简单的算法的问题和一些底层原理，可是面试的时候还有些吐槽。

入职以后，发现面试问的问题在工做中确实用到了，而且在本身准备面试题的过程当中，也是根据平时的工做经验总结的。

本身当时以为用不到是由于以前的业务场景不够复杂，用户量不够大，因此有些知识点用不到，不少产品需求都是须要本身实现的，现有的组件不能知足有些问题。

好比本身须要实现一个组织架构树，对每个节点进行不一样的操做，有的时候还须要 table 和 tree 相结合，一些比较复杂的节点数据可能比较多，因此还须要考虑性能优化的问题。

因此面试的时候就会问: 如何遍历一个树，并对其进行优化。

注重底层原理和概念的学习

有的人会问 底层知识，原理有没有用？？ 答案确定是有用的！！

对于一我的的技能，我以为最重要的是解决问题的能力，由于咱们的工做其实就是解决一个又一个的问题，无论是从产品层面仍是从技术层面，都是将这个问题解决。

而你了解更多的底层知识，更多的原理知识，都是提升你解决问题的能力，若是你知道 api 背后的原理就能更好的选择使用哪一个 api。

而且了解底层知识和原理也会提升你排查问题的能力，由于你工做中总会遇到：“明明就是这样的啊，为何报错啊，为何不能用啊，为何和预期不对啊”，你若是只是知道 api 是怎么使用的，有的时候是没办法很好的排查问题的。

最好从官方文档学习

不知道你们学习知识的时候都是从何种渠道学习的呢？

我的的建议是最好从官方文档学习，遇到问题最好去看下源码。

学习知识最好从一手的内容学习，只看别人的写的博客之类的是不行的，就像吃别人嚼过的馍同样，包括我这篇文章，我都不能保证全部的观点和知识点的正确性，固然了，当你对某个知识点理解不清楚的去看下其余人的观点也是对你有帮助的。

---

下面是我我的的面试题

部分面试题（答案仅供参考，不保证其正确性）

CSS

Q1：怎么实现三列布局（左侧和右侧宽度固定，中间自适应）

常见 CSS 布局

该问题主要想了解面试者的思惟是否有局限性，实现该布局是一个比较常见而且方法不少的一种布局方式，而且能够引导面试者一步一步回答 CSS 相关的基础问题。

• 绝对定位 + 中间版块不给宽度
• 两侧浮动 + 中间自动撑开（使用 calc 动态计算宽度，设置对应宽度的 margin）
• flex，左右设置 flex-basis，中间设置 flex-grow

基本上最多见的答案是这三种布局方式，可是不少人都只说一个 flex，其余两种布局方式稍微考虑下就能够想到（o´ﾟ□ﾟ`o），该问题不是想让面试者回答出什么奇淫技巧，只是对 CSS 基础知识的一个考察。

Q 1-1: flex 具体是怎么实现三列布局的（左侧和右侧的宽度是怎么设置的，中间自适应使用的是哪一个属性）

flex 设置宽度和宽度自适应应该算是 flex 的最基本用法，在面试中，问到 flex 的设置宽度和中间自适应具体是哪一个属性，不少面试者都回答“不记得了，平时都是自动填充的”

Q 1-2: 设为 flex 属性以后，子元素的哪些属性会失效

float、clear 和 vertical-align

Q 1-3 float/绝对定位 怎么实现中间宽度自适应

Q2: 移动端开发 rem 布局的原理（rem 单位换算）

Q3: 有没有本身写过组件

Q 3-1: 怎么实现样式的继承和复用

Q 3-2: 你平时都是怎么管理本身的 CSS

• base.css、common.css、page.css（对应都存放哪些内容）

Q 3-3: 你平时都是使用 sass/lass/styles 的哪些功能，sass 的计算属性对页面性能有影响吗？

Q4: 如何在页面上画一个圆

• SVG
• CANVAS
• css border-radius
• background
• map + area
• 直接放一张圆形图片

Q 4-1: 如何在页面上画一个椭圆

<style>
  .sector {
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: #f00 transparent transparent;
    border-radius: 50px;
  }
</style>
复制代码

Q 4-2: 若是圆边界模糊，有什么办法去锯齿

这几个问题基本上能够了解到面试者平时都是怎么使用 CSS 的了，对于 CSS，我以为够用就好，由于咱们如今基本急太处理兼容性问题（有 babel 而且咱们的项目不要求兼容 ie6 等古老的浏览器）

JS

Q1: JS 基本数据类型

cherryblog.site/deepcopy.ht…

Q 1-1 JS 数据类型有哪些，其中基本数据类型有哪些

• Boolean
• Null
• Undefined
• Number
• String
• Symbol (ECMAScript 6 新定义)
• Object

(ES6以前)其中5种为基本类型:string,number,boolean,null,undefined,ES6出来的Symbol也是原始数据类型 ，表示独一无二的值。Object 为引用类型(范围挺大),也包括数组、函数

Q: 1-2 原始数据类型和引用类型的区别

在内存中的存储方式不一样，原始数据类型在内存中是栈存储，引用类型是堆存储 栈（stack）为自动分配的内存空间，它由系统自动释放；而堆（heap）则是动态分配的内存，大小不定也不会自动释放。

在内存中存储方式的不一样致使了原始数据类型不可变 原始数据类型和引用数据类型作赋值操做一个是传值一个是传址

Q: 1-3 深拷贝 和 浅拷贝 的区别

cherryblog.site/deepcopy.ht…

Q: 1-4 怎么实现浅拷贝

• ES6：object.assign()
• 展开运算符…
• 本身封装函数实现

Q: 1-5 怎么实现一个深拷贝

• JSON.parse() (可是若是里面有 function 和 undefined 不可用)
• lodash
• 本身封装

Q: 1-6 null和undefined的差别

相同点:

• 在 if判断语句中,值都默认为 false
• 大致上二者都是表明无,具体看差别 差别:
• null转为数字类型值为0,而undefined转为数字类型为 NaN(Not a Number)
• undefined是表明调用一个值而该值却没有赋值,这时候默认则为undefined
• null是一个很特殊的对象,最为常见的一个用法就是做为参数传入(说明该参数不是对象)
• 设置为null的变量或者对象会被内存收集器回收

这个问题是一个 JS 基础相关的问题，能够考察面试者 JS 基本功

Q2: 实现给数字添加千分位符的方法

• 正则表达式："12345678".replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')
• 字符串分析， 循环，而后3位加','
• 数字分析， 取到整数部分， %1000 操做， 而后加逗号 拼接字符串 (12345678).toLocaleString("en-US") => "12,345,678"

Q3: 面向对象三大要素

cherryblog.site/javascript-…

• 封装、继承、多态

Q3-1: 可以简单的说明面向对象和面向过程的区别吗

• 面向过程就是分析出解决问题所须要的步骤，而后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就能够了。
• 面向对象是把构成问题事务分解成各个对象，创建对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。
• 面向对象： 狗.吃(屎)
• 面向过程： 吃.(狗,屎)

Q3-4: 怎么实现封装和继承

Q3-5: 一句话概述什么是闭包

Q4: 一句话概述什么是 promise

The Promise object is used for asynchronous computations. A Promise represents a single asynchronous operation that hasn't completed yet, but is expected in the future.

译文：Promise对象用于异步操做，它表示一个还没有完成且预计在将来完成的异步操做。

Q 4-1: promise 解决了哪些问题

Q 4-2: 在没有 promise 以前，怎么解决异步回调

JS 异步回调的 4 种解决方案

Q 4-3: 本身如何实现一个 promise（blog.csdn.net/chaunceyw/a…

• new Promise(fn) 返回一个promise对象
• 在fn 中指定异步等处理
  • 处理结果正常的话，调用resolve(处理结果值)
  • 处理结果错误的话，调用reject(Error对象)

promise 也是一道常见的面试题，在开始问什么是 promise 的时候，不多有人可以用一个话说出什么是 promise，都只是说 promise 的 api 怎么使用，包括闭包，也不多有人可以用一句话归纳什么是闭包。我的感受不能用一句话归纳都是理解的不够深刻或者没有从更高的层面理解

Q5: eventloop

在一个事件循环中，异步事件返回结果后会被放到一个任务队列中。然而，根据这个异步事件的类型，这个事件实际上会被对应的宏任务队列或者微任务队列中去，当执行栈为空的时候，主线程会首先查看微任务中的事件，若是微任务不是空的那么执行微任务中的事件，若是没有在宏任务中取出最前面的一个事件。把对应的回调加入当前执行栈...如此反复，进入循环。

• macro-task(宏任务)
  • setTimeout
  • setInterval
  • setImmediate
• micro-task(微任务)
  • Promise
  • process.nextTick

eventloop 也是一个很常见的面试题，也是回答出来比较高的一个问题，能够写一个函数，让面试者回答输出

计算机相关

Q1 :比较 HTML XML XHTML 和 JSON

• 咱们最熟悉的就是 HTML（HyperText Markup Language / 超文本标记语言），用来描述和定义 网络内容的标记语言，超文本的意思是说，除了能标记本文，还能标记 图片，视频，连接 等其余内容

• XML（Extensible Markup Language / 可扩展标记语言），表现就是给一堆文档加上标签，说明里面的数据是什么意思，方便存储、传输、分享数据。和 HTML 的区别是 HTML 的标签就预约义的，XML 是可扩展的 XHTML: Extensible Hypertext Markup Language / 可扩展超文本标记语，其实就是 HTML 的严格语法形式，约定了 属性名必需小写，空元素必需关闭，元素名小写，属性名必需加引号，布尔类型必需加属性值

• JSON（Javascript Object Notation）比较轻量级的数据交换格式，由键值对组成，数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小

这个问题确实是一个很基础的计算机先关的问题，可是不少的面试者仍然不能准确的说出 HTML 的含义（超文本标记语言），在说 XML 和 JSON 的区别的时候只能回答出 XML 经常使用做配置文件，JSON 用于 AJAX 传输数据

Q2: 概述输入一个url到网页呈现的过程

Q 2-1: DNS 解析的详细过程

Q 2-2: 概述 http 的缓存控制（http2 与相关缓存控制）

Q 2-3: 简述三次握手

Q 2-4: 页面加载白屏的缘由有哪些，以及如何监控白屏时间，如何优化

Q 2-5：script 标签的属性有哪些

Q 2-6: script 标签的 defer 和 async 标签的做用与区别

Q 2-7: script intergrity的做用

这个问题真的是前端面试必问问题，由于能全方面考察面试者的能力，能根据面试者的回答层层层深刻，引伸出好多问题

Q3: 你所接触的前端领域的通信有哪些（github.com/rainjay/blo…

• 前端和后端
• 前端和移动端
• 前端 父页面 和 iframe 之间
• 浏览器各个 tab 之间
• web workers 线程通讯
• 路由间的通讯
• vue 父子组件

Q 3-1: 通讯的要点和目的

要点：1. 发送者和接收者 2. 传输媒介 3. 传输的数据 4. 传输格式（协议）

目的：1. 同步数据 2. 传递指令(执行的方法)

框架

Q1: 三大框架解决了传统 JQ 开发的哪些问题

使前端不用再操纵 DOM,数据驱动，经过数据的改变直接改变 DOM

Q 1-1: Vue2.0 怎么实现双向绑定的

Q 1-2: Vue3.0 怎么实现双向绑定的

Q 1-3: Object.defineProperty() 和 proxy 的区别

Q2: 你使用过哪些 Vue/React 全家桶，分别解决了什么问题

Q3: Vue/React 的 diff 算法

Q4: Vue hash 路由和 history 路由的区别

Q5: Vue 计算属性和 watch 在什么场景下使用

Q6: Vue 的 nexttick 实现的原理

对于 Vue/React/Angular 三大框架会使用哪些 api 是次要的，主要是要了解框架解决的问题和实现原理。

打包工具

Q1: webpack 相关，是否本身配置过

Q1-1: webpack 和其余自动化构建工具（gulp、grunt、rollup）有哪些区别（juejin.im/post/5b10c6…

• webpack 是 module bundle
• gulp 是 tast runner
• Rollup 是在 Webpack 流行后出现的替代品。Rollup 在用于打包 JavaScript 库时比 Webpack 更加有优点，由于其打包出来的代码更小更快。 但功能不够完善，不少场景都找不到现成的解决方案。

Q1-2: 模块化解决了前端的哪些痛点

• 命名冲突
• 文件依赖
• 代码复用

Q1-3: webpack 的 loader 和 plugin 区别，举几个经常使用的 loader 和 plugin 并说出做用

• loader 用于对模块的源代码进行转换。loader 可使你在 import 或"加载"模块时预处理文件。所以，loader 相似于其余构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 能够将文件从不一样的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至容许你直接在 JavaScript 模块中 import CSS文件！ 由于 webpack 自己只能处理 JavaScript，若是要处理其余类型的文件，就须要使用 loader 进行转换，loader 自己就是一个函数，接受源文件为参数，返回转换的结果。
• Plugin 是用来扩展 Webpack 功能的，经过在构建流程里注入钩子实现，它给 Webpack 带来了很大的灵活性。 经过plugin（插件）webpack能够实 loader 所不能完成的复杂功能，使用 plugin 丰富的自定义 API 以及生命周期事件，能够控制 webpack 打包流程的每一个环节，实现对 webpack 的自定义功能扩展。

Q1-4: webpack 打包的过程

• 读取文件，分析模块依赖
• 对模块进行解析执行（深度遍历）
• 针对不一样的模块使用不一样的 loader
• 编译模块，生成抽象语法树（AST）
• 遍历 AST，输出 JS

Q1-5: webpack 打包以后生成哪些文件

Q2: webpack 打包出来的文件体积过大怎么办

Q3: webpack 热部署的原理

Q4: webpack 打包速度过慢怎么办？

关于 webpack ，对于初级前端，基本上只须要能够 cli 将项目起来，知道 loader 和 plugin 的区别以及经常使用的 loader、plugin 我的以为就差很少了，可是对于 高级前端及以上，最好仍是了解下 webpack 相关的原理

GIT 相关

Q1: git rebase

Q2: git cherrypick