往年经典前端面试题.docx

《往年经典前端面试题.docx》由会员分享，可在线阅读，更多相关《往年经典前端面试题.docx（31页珍藏版）》请在课桌文档上搜索。

1、往年经典前端面试题一、HTML/CSS篇1、HTML5标准提供了哪些新的API?【仅供参考】HTML5提供很多新的APL包括MediaAPITextTrackAPI、ApplicationCacheAPI、UserInteractionAPIDataTransferPICommandAPI、ConstraintionValidationAPI和HistoryAPI2、HTML5为浏览器提供了哪些数据存储方案？【仅供参考】在较高版本的浏览器中，提供了sessionStorage：和globalStorage0在HTML5规范中,用IOCalStOrage取代globalStorage。HTML5

2、中的WebStOrage包括两种存储方式，分别是SeSSionStOrage和IocalStorageoSeSSiOnStorage用于在本地存储一个会话（session）中的数据，这些数据只有同一个会话中的页面才能访问，当会话结来后，数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。IOCalStOrage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。IOCalStorage和SeSSionStorage都具有相同的操作方法，例如setitem、getltem和removeItem等3、如何区别HTML和HTML5?【仅供参考

3、】用DOCTYPE声明新增的结构元素和功能元素来区别它们。4、请描述一下cookies,sessionStorage和IOCaIStorage的区别？【仅供参考】cookie其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie最多能存储4k数据，它的生存时间由expires属性指定，并且cookie只能被同源的页面访问共享。SessionStorage是html5提供的一种浏览器本地存储的方法，它借鉴了服务器端session的概念，代表的是一次会话中所保存的数据。它一般能够存储5M或者更大的数据，它在当前窗口关闭后就失

4、效了，并且SessionStorage只能被同一个窗口的同源页面所访问共享。IocalStorage也是html5提供的一种浏览器本地存储的方法，它一般也能够存储5M或者更大的数据。它和SessionStorage不同的是，除非手动删除它，否则它不会失效，并且IoCalStOrage也只能被同源页面所访问共享。相关资料：SessionStorage,LocalStorage,Cookie这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于1ITML5WebStorage,创建它们的目的便于客户端存储数据。而cookie是网站为了标示用户身份而储存在用户本地终端上

5、的数据（通常经过加密）。CoOkie数据始终在同源（协议、主机、端口相同）的http请求中携带（即使不需要），会在浏览器和服务器间来回传递。存储大小：1、cookie数据大小不能超过4ko2、SessionStorage和IocalStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。有期时间：kIocalStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。2、SessionStorage数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化

6、一个新的会话。3、cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域：1、SessionStorage只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中共享。2IocalStorage在所有同源窗口中都是共享的。3、cookie在所有同源窗口中都是共享的。5、介绍一下你对浏览器内核的理解？【仅供参考】主要分成两部分：渲染引擎（IayOUtengineer或RenderingEngine）和JS引擎。渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后渲染到用户的屏幕上。JS引擎则：解析和执

7、行javascript来实现逻辑和控制DOM进行交互。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。6、HTML5应用缓存和常规的HTML浏览器缓存有什么差别？【仅供参考】HTML5应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括HTML、CSS图像和JaVaSeriPt脚本并存在本地。该特性提升了网站的性能，可通过如下方式实现。与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。7、COOkie和SeSSiOn的区别是什么？【仅供参考】区别如下：(1) COokie数据存放在客户的浏览器上，SeSSiOn数据存放在服务器上

8、。(2) CoOkie不是很安全，别人可以分析存放在本地的CoOkie并进行cookie欺骗。考虑到安全问题应当使用sessiono(3) SeSSiOn会在一定时间内保存在服务器上。当访问增多时，会占用较多服务器的资源。为了减轻服务器的负担，应当使用COOkie0(4)单个CoOkie保存的数据不能超过4KB,很多浏览器都限制一个站点最多保存20个Cookie0所以个人建议可以将登录信息等重要信息存放在SeSSiOn中，其他信息(如果需要保留)可以存放在COOkie中。8、如何让老版本IE也支持H5【仅供参考】你可以使用IE条件注释来调用这个js文件，这样像FireFox等非IE浏览器就会忽

9、视这段代码，也就不会有无谓的http请求了。下面这段代码仅会在IE浏览器下运行：以下是js文件中的代码：(function()if(!/*cc_on!*/0)return;vare=z,abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”split(,),i=e.IengthjwhiIe(i-)document.CreateElement(ei)(

10、)9、如何让Websocket兼容低版本浏览器？【仅供参考】使用AdobeFlashSocketActiveXHTMLFile(E)、multipart编码发送XHR与长轮询发送XHR等，可以实现不支持WebSocketAPl的浏览器对WebSocket的兼容。10、的title和alt有什么区别【仅供参考】通常当鼠标滑动到元素上的时候显示alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。11、行内元素有哪些？块级元素有哪些？空(VOid)元素有那些？【仅供参考】定义：CSS规范规定，

11、每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为block，则为“块级”元素；span默认display属性值为inline,是“行内”元素。行内元素有：abspanimginputselectstrong(强调的语气)块级元素有：divulolIidldtddhlh2h3h4p空元素：常见：brhrimginputlinkmeta不常见：areabasecolcommandembedkeygenparamsourcetrackwbr【仅供参考】几乎所有的浏览器(如Safari、Chrome、FirefoxOPera、IE)

12、都支持HTML513、IOCalStOrage和Cookie的区别是什么？【仅供参考】IocalStorage的概念和cookie相似，区别是IocalStorage是为了更大容量的存储设计的。COokie的大小是受限的，并且每次请求一个新页面时，cookie都会被发送过去，这样无形中浪费了带宽。另外，Cookie还需要指定作用域，不可以跨域调用。除此之外，IocalStorage拥有setlten,getltemremoveltemclear等方法，CoOkie则需要前端开发者自己封装SetCOokie和getCookie0但Cookie也是不可或缺的，因为Cookie的作用是与服务器进行交

13、互，并且还是HTP规范的一部分，而1。CaIStorage仅因为是为了在本地“存储”数据而已，无法跨浏览器使用。14、HTML5如何实现跨域？【仅供参考】在服务器端设置允许在其他域名下访问，例如允许所有域名访问以下内容。response.SetHeader(zzAccess-Control-Allow-0rigi11z,“*)；response.SetHeader(zzAccess-Control-AlIow-Methodszz,POST)；response.SetHeader(Access-Control-AlIow-Headerszz,zz-requested-with,COntent-t

14、ype)；15、如果把HTML5看成一个开放平台，它的构建模块有哪些？【仅供参考】如果把HTML5看成一个开放平台，它的构建模块至少包括以下几个，如oWnav标签用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确标签用来定义文档的页眉。标签用来描述文档的结构。footer)标签用来定义页脚。在典型情况下，该元素会包含文档作者的姓名、文档的创作日期和联系信息【仅供参考】HTML5是最新的HTML标准，它的主要目标是提供所有内容，而不需要任何Flash、SiIVerLight等的额外插件，这些内容来自动画、视频、富GUl等HTML5是万维网联盟(W3C)和网络超文本应用技术工作组(

15、WHATWG)合作输出的。17、calc,support,Inedia各自的含义及用法？【仅供参考】support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。CaIC()函数用于动态计算长度值。CaIC()函数支持“+”，“*”，运算；media查询，你可以针对不同的媒体类型定义不同的样式。18、哪些css属性可以继承？【仅供参考】答案：可继承：text-alignfontcolor、Iine-height、letter-spacingsword-spacingstext-indent

16、不可继承：borderpaddingmarginwidthheight;19、rgba和OPaCity的透明效果有什么不同？【仅供参考】rgba()和OPaCity都能实现透明效果，但它们最大的不同是OPaCity作用于元素，并且可以设置元素内所有内容的透明度；而rgba()只作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果)。20、CSSSprite(雪碧图，精灵图)是什么，谈谈这个技术的优缺点？【仅供参考】就是把很多图标合并到一张图上，然后根据图片的位置(backgroundposition)加上显示的宽高来控制具体用哪个图标，这样可以减少网络请求，但是制作和使用

17、会显得复杂一些。二、JS/ES6/TS篇1、基本数据类型和引用数据类型有什么区别？【仅供参考】(1)变量直接赋值时：基本数据类型赋值的是数据的副本，原数据的更改不会影响传入后的数据。引用数据类型赋值的是数据的引用地址，原数据的更改会影响传入后的数据。(2)两者在内存中的存储位置：基本数据类型存储在栈中。引用数据类型在栈中存储了指针，该指针指向的数据实体存储在堆中。2、offsetWidth/offSetHeight,c1ientWidthc1ientHeight,scrollWidth/scrollHeight的区别？【仅供参考】offsetWidth/offsetlleight返回值包含co

18、ntent+padding+border+包含滚动条，效果与e.getBoundingClientRect()相同clientWidth/clientHeight返回值只包含content+padding,如果有滚动条，也不包含滚动条scrolIWidth/scrol!Height返回值包含content+padding+溢出内容的尺寸3、JS里对this的理解【仅供参考】this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。普通的函数调用，函数被谁调用，this就是谁。构造函数的话，如果不用new操作符而直接调用，那即this指向Window。用new操作符生成对象实例后，th

19、is就指向了新生成的对象。匿名函数或不处于任何对象中的函数指向WindOW0如果是call,apply等，指定的this是谁，就是谁。4、foo=fooIIbar,这行代码是什么意思？为什么要这样写？【仅供参考】如果foo转为false,则返回bar；否则直接返回foo逻辑或：如果第一个值为true,直接返回第一个值；否则直接返回第二个值逻辑与：如果第一个值为false,直接返回第一个值；否则返回第二个值5、dom事件委托什么原理，有什么优缺点【仅供参考】事件委托原理：事件冒泡机制(把子元素的事件行为委托给父级元素执行优点)优点：6、事件绑定和普通事件有什么区别？【仅供参考】普通事件会覆盖掉，

20、只执行后者方法dom.onclick=function()事件绑定不会覆盖掉，会依次执行addEventListener(,click,function(),true)7、javascript的内存(垃圾)回收机制？【仅供参考】垃圾回收器会每隔一段时间找出那些不再使用的内存，然后为其释放内存一般使用标记清除方法(ITIarkandsweep),当变量进入环境标记为进入环境，离开环境标记为离开环境垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量(闭包)，在这些完成之后仍存在标记的就是要删除的变量了还有引用计数方法(referencecou

21、nting),在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1,如果该变量的值变成了另外一个，则这个值得引用次数减1,当这个值的引用次数变为0的时候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的，也就是说只要涉及BOM及DOM就会出现循环引用问题。8

22、、箭头函数有哪些特点？【仅供参考】不需要function关键字来创建函数省略return关键字改变this指向9、JavaScript由以下三部分组成：【仅供参考】ECMAScript(语法部分)：JavaScript语言基础DOM(文档对象模型)：规定了访问HTML和XML的方法BOM(浏览器对象模型)：提供了浏览器窗口之间进行交互的对象和方法10、对JS的slice和splice的理解？【仅供参考】SIiCe是用来截取，比如SliCe(1,3),下标含头不含尾的截取，SIiCe(I),从下标1开始截取到最后，SliCe(-2)表示截取倒数第二个开始，取到最后。返回被提取的数组。原数组不变。

23、splice通过删除或替换现有元素或者原地添加新的元素来修改数组，原数组变化。spilce(l,0,a,b),在下标为1的位置开始删除0个元素,追加两个元素%,飞，此时/的下标变成1spilce(l,l,a,b,),在下标为1的位置开始删除1个元素,追加两个元素%,飞，此时/的下标变成1返回被删除的数组H、如何判断变量为NaN【仅供参考】IsNaN(NaN) isNaN(1000) isNaN(小明) isNaN(, 101,)/ / /通过isNaN()判断返回true返回false返回true(判断前会转换成number类型)返回false12、理解下面代码的区别【仅供参考】functio

24、nfoo()/code()以function关键字开头的语句会被解析为函数声明，而函数声明是不允许直接运行的。只有当解析器把这句话解析为函数表达式，才能够直接运行(functionfoo()/code.)()运算符开头的表达式被立即执行13、如何从TyPeSeriPt的子类调用基类构造函数【仅供参考】使用SUPer()函数，从子类中调用父类或基类构造函数14、如何在TypeScript中实现继承【仅供参考】继承是一种从另一个类获取一个类的属性和行为的机制。继承成员的类称为基类，继承这些成员的类称为派生类。classShapeAreainumberconstructor(area:number)

25、this.Area=area)classCircleextendsShapedisplay():voidconsole,log(圆的面积：+this.Area)varobj=newCircle(320);obj.display()15、TypeScript的缺点【仅供参考】1.TypeScript需要很长时间来编译代码2 .要使用任何第三方库，必须使用定义文件。并不是所有第三方库都有可用的定义文件。3 .类型定义文件的质量是一个问题，即如何确保定义是正确的？16、TypeScript的内置类型【仅供参考】numberstringboolean、undefined、null、void17、Typ

26、eScript的as语法是什么？【仅供参考】as是TyPeSeriPt中类型断言的附加语法，引入as-语法的原因是原始语法()与JSX冲突letempCode:any=111;letemployeeCode=codeasnumber;18、TyPeSCriPt中？.，？，！：，一，*等符号的含义？【仅供参考】?.可选链?类似与短路或，？?避免了一些意外情况，0,NaN以及,false被视为false值。只有undefind,null被视为false值。!.在变量名后添加！，可以断言排除Undefined和null类型_,声明该函数将被传递一个参数，但您并不关心它!:待会分配这个变量，ts不要担

27、心*求豪19、Promise构造函数是同步执行还是异步执行，那么then方法呢？【仅供参考】promise构造函数中回调函数是同步执行的，then方法中回调函数是异步执行的20、设计一个对象，键名的类型至少包含一个SymboI类型，并且实现遍历所有key【仅供参考】letname=Symbol(name);letproduct=name:洗衣机,“price”:799；Reflect.ownKeys(product);三、Vue/React篇1、在react中如何处理事件？【仅供参考】为了解决跨浏览器的兼容性问题，SyntheticEvent实例将被传递给你的事件处理函数，SynthetiCE

28、Vent是React跨浏览器的浏览器原生事件包装器，它还拥有和浏览器原生事件相同的接口，包括StopPropagationO和PreventDefault()。比较有趣的是，React实际上并不将事件附加到子节点本身。ReaCt使用单个事件侦听器侦听顶层的所有事件。这对性能有好处，也意味着React在更新DOM时不需要跟踪事件监听器。2、什么是jsx?【仅供参考】在第一发布react时，还引入了一种新的js方言jsx,将原始HTML模板嵌入到JS代码中。JSX代码本身不能被浏览器读取，必须使用BabeI和WebPaCk等工具将其转换为传统的JS。很多开发人员就能无意识使用JSX,因为它已经与R

29、eact结合在一起了3、类组件和函数组件之间的区别是什么？【仅供参考】类组件可以使用其他特性，如状态和生命周期钩子，并且他有this函数组件只能接收ProPS渲染到页面，无状态组件，没有this,不能使用生命周期钩子函数组件性能要高于类组件，因为类组件使用要实例化，而函数组件直接执行取返回结果即可，为了提高性能，尽量使用函数组件4、Redux有哪些优点？【仅供参考】Redux的优点如下：结果的可预测性-由于总是存在一个真实来源，即store,因此不存在如何将当前状态与动作和应用的其他部分同步的问题。可维护性-代码变得更容易维护，具有可预测的结果和严格的结构。服务器端渲染-你只需将服务器上创建的

30、store传到客户端即可。这对初始演染非常有用，并且可以优化应用性能，从而提供更好的用户体验。开发人员工具-从操作到状态更改，开发人员可以实时跟踪应用中发生的所有事情。社区和生态系统-Redux背后有一个巨大的社区，这使得它更加迷人。一个由才华横溢的人组成的大型社区为库的改进做出了贡献，并开发了各种应用。易于测试-Redux的代码主要是小巧、纯粹和独立的功能。这使代码可测试且独立。组织-Redux准确地说明了代码的组织方式，这使得代码在团队使用时更加一致和简单5、UseRef和UseIinperativeHandle分别讲解一下？他们为我们解决了什么问题？【仅供参考】ref是用来获取dom元素

31、，然后执行某些方法，获取某些属性的。USeRef可以很方便地保存任何可变值，其类似于在class中使用实例字段的方式。useRef创建的实例会保存一个叫current的对象，每次重新渲染都会返回同一个对象，实现跨生命周期保存数据，而且CUrrent里面发生变化并不会导致组件重新渲染。UseImperativeHanclle(ref,CreateHandle,deps)uselmperativelland1e可以让你在使用ref时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用ref这样的命令式代码。UseImperativeHandle应当与forwardRef一起使用Q6、为什么不直

32、接更新state?【仅供参考】如果试图直接更新state,就不会重新渲染组件需要使用SetState()方法更新State,它对State对象进行更新，当State改变时，组件通过重新渲染来响应7、常用的hooks【仅供参考】useState：定义State的数据，参数是初始化的数据，返回值两个值L初始化值，2.修改的方法UseEffect:副作用函数，顾名思义，副作用即只有使用过后才会产生副作用当作生命周期来使用：第二个参数如果没写的话，页面一更新触发，CompoentDidMountCompoentDiciUpdate第二个参数如果空数组的话，只执行一次，CompoentDidMount数

33、组中跟某些变量，当作监听器来使用，监听数据的变化，UseEffect是一个副作用函数，组件更新完成后触发的函数如果我们在USeEffeCt返回一个函数的，组件被销毁的时候触发useMemo：用来计算数据，返回一个结果，监听数据的变化，第二个参数就是监听的数据，具有缓存性USeMemO和USeEffeCt相比较来说，UseMemo是组件更新的时候触发生命周期UseCallback:当父组件向子组件传递函数的时候，父组件的改变会导致函数的重新调用产生新的作用域，所以还是会导致子组件的更新渲染，这个时候我们可以使用UseCallback来缓存组件useRef：相当于CreateRef的使用，创建组件

34、的属性信息UseContext:相当在函数组件中获取context状态数的内容信息useReducer：USeRedUCer是用来弥补USeState的补不足，可以把数据进行集中式的管理，单独处理数据的逻辑信息8、什么是高阶组件？【仅供参考】高阶组件(HoC)是接受一个组件并返回一个新组件的函数。基本上，这是一个模式，是从React的组合特性中衍生出来的，称其为纯组件，因为它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为HOC可以用于以下许多用例代码重用、逻辑和引导抽象渲染劫持state抽象和操作props处理9、为什么ReactRouterv4中使用switch关键字【

35、仅供参考】虽然P用于封装Router中的多个路由，当你想要仅显示要在多个定义的路线中呈现的单个路线时，可以使用“switch”关键字。使用时，switch标记会按顺序将己定义的URL与己定义的路由进行匹配。找到第一个匹配项后，它将渲染指定的路径。从而绕过其它路线10、描述Flux与MVC?【仅供参考】传统的MVC模式在分离数据(MOde1)、UI(View和逻辑(ControIIer)方面工作得很好，但是MVC架构经常遇到两个主要问题：数据流不够清晰:跨视图发生的级联更新常常会导致混乱的事件网络，难于调试。缺乏数据完整性:模型数据可以在任何地方发生突变，从而在整个Ul中产生不可预测的结果。使用

36、Flux模式的复杂用户界面不再遭受级联更新，任何给定的ReaCt组件都能够根据store提供的数据重建其状态。Flux模式还通过限制对共享数据的直接访问来加强数据完整性11、谈谈你对MVVM开发模式的理解？【仅供参考】MVVM分为MOde1、View、VieWMOdel三者。Model代表数据模型，数据和业务逻辑都在ModeI层中定义；VieW代表Ul视图，负责数据的展示；ViewModel负责监听MOdel中数据的改变并且控制视图的更新，处理用户交互操作；Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当

37、Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作domo12、vueSIOt是做什么的？【仅供参考】可以插入的槽口，比如插座的插孔。13、说一下v-bind是什么，有什么用？【仅供参考】v-bind：绑定属性14、 v-once【仅供参考】只渲染元素和组件一次。15、v-model的原理？【仅供参考】我们在vue项目中主要使用V-IIIOdeI指令在表单input、textarea、select等元素上创建双向数据绑定，我们知

38、道v-model本质上不过是语法糖，V-ITiodel在内部为不同的输入元素使用不同的属性并抛出不同的事件：text和textarea元素使用VaIUe属性和input事件；checkbox和radio使用checked属性和change事件；select字段将value作为prop并将change作为事件。以input表单元素为例：相当于inputv-bind:VaiUe=somethingV-Or:input=something=$event.target,value”)如果在自定义组件中，v-model默认会利用名为value的prop和名为input的事件，如下所示：父组件：子组件：v

39、alueprops:value:String,methods:testl()this.$emit(,input*,小红),),16、vue.js的两个核心是什么？【仅供参考】数据驱动和组件化思想17、说一下Vm.$off()的作用【仅供参考】移除自定义事件监听器。18、Vuex是通过什么方式提供响应式数据的？【仅供参考】在Store构造函数中通过newVue()实现的。利用Vue来监听state下的数据变化，给状态(数据)添加getter.Setter可以监听数据改变。19、描述一下VUe在生命周期的InOUnted阶段时，页面是怎么样的【仅供参考】mounted执行时,数据和虚拟DOM树己经

40、都加载完成,也渲染完成20、Vuex如何区分state是外部直接修改，还是通过mutation方法修改的？【仅供参考】在vuex底层会有一个committing变量，初始值false；当通过mutation方法修改数据时把committing变量变成true；如果是直接改变的变量则不改变committing变量四、WebPaCk/RolIup篇1、webpack的核心概念【仅供参考】Entry：入口，Webpack执行构建的第一步将从Entry开始，可抽象成输入。告诉webpack要使用哪个模块作为构建项目的起点，默认为.srcindex.jsoutput：出口，告诉WebPaCk在哪里输出它

41、打包好的代码以及如何命名，默认为.distMOdUIe：模块，在Webpack里一切皆模块，一个模块对应着一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块。ChUnk:代码块，一个Chunk由多个模块组合而成，用于代码合并与分割。1.oade广模块转换器，用于把模块原内容按照需求转换成新内容。Plugin：扩展插件，在Webpack构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。2、HMR热模块更新【仅供参考】借助webpack.IlotMocluleReplacementPlugin(),devServer开启hot场景1：实

42、现只刷新css,不影响js场景2：js中实现热更新，只更新指定js模块if(module,hot)module,hot.accept(,./library,js,function()/Dosomethingwiththeupdatedlibrarymodule）；3、Plugin(插件)的作用是什么？【仅供参考】Plugin是用来扩展Webpack功能的，通过在构建流程里注入钩子实现，它给Webpack带来了很大的灵活性。Webpack是通过PIUginS属性来配置需要使用的插件列表的。PlUginS属性是一个数组，里面的每一项都是插件的一个实例，在实例化一个组件时可以通过构造函数传入这个组件

43、支持的配置属性。4、如何解决循环依赖问题【仅供参考】Webpack中将require替换为Webpackjequire,会根据moduleld到InstalledModules找是否加载过，加载过则直接返回之前的export,不会重复加载。5、webpack-dev-server和http服务器的区别【仅供参考】webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，比传统的http服务对开发更加有效。6、Webpack的打包过程/打包原理/构建流程？【仅供参考】初始化：启动构建，读取与合并配置参数，加载PIUgin,实例化COmPiIer

44、编译：从Entry出发，针对每个Module串行调用对应的Loader去翻译文件中的内容，再找到该MOdUle依赖的ModUle,递归的进行编译处理输出：将编译后的MOdUIe组合成ChUnk,将ChUnk转换成文件，输出到文件系统中细节：WebpackCLI通过yargs模块解析CLI参数，并转化为配置对象OPtion(单入口：Object,多入口：Array),调用webpack(option)创建compiler对象。如果有option.plugin,则遍历调用PIUgiil.apply()来注册plugin,判断是否开启了watch,如果开启则调用compiler.watch,否则调用

45、compiler,run,开始构建。创建Compilation对象来收集全部资源和信息，然后触发make钩子。make阶段从入口开始递归所有依赖，每次遍历时调用对应Loader翻译文件中内容，然后生成AST,遍历AST找到下个依赖继续递归，根据入口和模块之间关系组装ChUnk,输出到dist中的一个文件内。在以上过程中，webpack会在特定的时间点（使用tapable模块）广播特定的事件，插件监听事件并执行相应的逻辑，并且插件可以调用WebPaCk提供的api改变webpack的运行结果7、如何提高WebPaCk构建速度【仅供参考】组件懒加载、路由懒加载、开启gzip、公共的第三方包上cdn、配置include/exclude缩小Loader对文件的搜索范围、配置cache缓存Loader对文件的编译副本、配置resolve提高文件的搜索速度8、babel相关：polyfill以及runtime区别，ESstage含义，preset-env作用等等【仅供参考】polyfill以及runtime区别babel-polyfill的原理是当运行环境中并没有实现的一些方法，babel-Polyfill会做兼容。babel-runtime它是将es6编译成es5去执行。我们使用es6的语法来编写，最终会通过babel-runtime编译成es5