webpack面试题

1. webpack的路径问题到底是怎么回事

webpack的路径问题到底是：
事实上前端构建过程一般都是建立在前后分离基础上的，你要想让自己的构建过程清晰、简单和方便，请首先将自己的项目前后实现分离。当然这个有难度，所以你的这个场景并不是非常适合gruntjs通常的构建模式。 对应问题讲完，再给你一些建议。

2. webpack到底怎么用

30分钟手把手教你学webpack实战
首先对于很多刚接触webpack人来说，肯定会问webpack是什么？它有什么优点？我们为什么要使用它？带着这些问题，我们来总结下如下：
    Webpack是前端一个工具，可以让各个模块进行加载，预处理，再进行打包，它能有Grunt或Gulp所有基本功能。优点如下：
支持commonJS和AMD模块。
支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码。
可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。
使用模块加载器，可以支持sass，less等处理器进行打包且支持静态资源样式及图片进行打包。
更多等等。。。带着这些问题我们慢慢来学习webpack。
https://www.cnblogs.com/tugenhua0707/p/4793265.html

3. webpack是为了解决什么问题

配置入口没glob式需要额外处理 目录结构复杂file-loder面path功能太弱候自定义构建目录结构能放目录 源码比较复杂遇问题看源码要花间 没 babel webpack ES贰0依5+ 语接受提示用指定 loader意味着支持部 ES贰0依5 语 firefox 与 chrome 浏览器能直接跑代码用 webpack 编

4. webpack 找不到模块的问题求助

可以看看webpack的官网的, 比如在installation这个章节, 里面就介绍了怎么安装webpack.
首先需要安装一个全局的webpack
npm install webpack -g
这样才可以正确的使用webpack这个命令
然后, 还可以在当前项目里面也安装一个webpack, 这也是官方推荐的做法！

5. webpack打包问题

webpack只是给你做打包压缩之类的功能，你的文件怎么写就是怎么调用，按照你的描述，你直接在引用js的地方testFun()便可以执行这个代码。

6. vue前端面试题有哪些呢

文章中给你列举了部分的面试题，这些都是公司面试常遇到的，还有需要的还可以自己去查阅一下资料
1、active-class是哪个组件的属性？嵌套路由怎么定义？
答：vue-router模块的router-link组件。
2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id
3、vue-router有哪几种导航钩子？
答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件
4、scss是什么？安装使用的步骤是？有哪几大特性？
答：预处理css，把css当前函数编写，定义变量,嵌套。 先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：mole里面test、loader
4.1、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？
答：css的预编译。
使用步骤：
第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss
第三步：还是在同一个文件，配置一个mole属性
第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”
有哪几大特性:
1、可以用变量，例如（$变量名称=值）；
2、可以用混合器，例如（）
3、可以嵌套
5、mint-ui是什么？怎么使用？说出至少三个组件使用方法？
答：基于vue的前端组件库。npm安装，然后import样式和js，vue.use（mintUi）全局引入。在单个组件局部引入：import {Toast} from ‘mint-ui’。组件一：Toast(‘登录成功’)；组件二：mint-header；组件三：mint-swiper
6、v-model是什么？怎么使用？ vue中标签怎么绑定事件？
答：可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：<input @click=doLog() />
7、axios是什么？怎么使用？描述使用它实现登录功能的流程？
答：请求后台资源的模块。npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中
8、axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？axios.put(‘api/user/8′)呢？
答：跨域，添加用户操作，更新操作。
9、什么是RESTful API？怎么使用?
答：是一个api的标准，无状态请求。请求的路由地址是固定的，如果是tp5则先路由配置中把资源路由配置好。标准有：.post .put .delete
10、vuex是什么？怎么使用？哪种功能场景使用它？
答：vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
11、mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？
答：一个model+view+viewModel框架，数据模型model，viewModel连接两个
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷
12、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？
答：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
钩子函数参数：el、binding
13、说出至少4种vue当中的指令和它的用法？
答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定
14、vue-router是什么？它有哪些组件？
答：vue用来写路由一个插件。router-link、router-view
15、导航钩子有哪些？它们有哪些参数？
答：导航钩子有：a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
参数：有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种
16、Vue的双向数据绑定原理是什么？
答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤：
第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
ps：16题答案同样适合”vue data是怎么实现的？”此面试题。
17、请详细说下你对vue生命周期的理解？
答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
18、请说下封装 vue 组件的过程？
答：首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。
然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。
19、你是怎么认识vuex的？
答：vuex可以理解为一种开发模式或框架。比如PHP有thinkphp，java有spring等。
通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。
应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。
20、vue-loader是什么？使用它的用途有哪些？
答：解析.vue文件的一个加载器，跟template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等
21、请说出vue.cli项目中src目录每个文件夹和文件的用法？
答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件
22、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
答：第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default {
第二步：在需要用的页面（组件）中导入：import smithButton from ‘../components/smithButton.vue’
第三步：注入到vue的子组件的components属性上面,components:{smithButton}
第四步：在template视图view中使用，<smith-button> </smith-button>
问题有：smithButton命名，使用的时候则smith-button。
23、聊聊你对Vue.js的template编译的理解？
答：简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）
详情步骤：
首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。
然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

7. 面试Web前端需要注意什么会面试哪些问题

作为一名HTML5前端工程师，为了工作，为了就业我们免不了要参加各种各样的面试。为此总结了面试前的注意事项：

第一：注意自己的仪容仪表

面试之前，一定要再次从头到脚地将自己的仪容仪表检查一遍。检查时主要包括，自己的牙缝是不是还有食物残渣，所以你需要就近找一个卫生间，如果没有卫生间就近找一个角落也是可以的，但是切记一定不要在大庭广众之下。因此，为了给自己整理出着装的时间请在约定时间前20分钟到达。

第二：再次检查面试时所需的资料是否都已带全

这些资料主要包括：身份证明、学历文凭证明、个人简历、以往作品等等，如果这些东西齐全之后，需要对这些资料做一个整理与排序。因为没有哪个面试官希望看到面试者拿出一堆“莫名其妙”的东西塞给他，让他自己再一页一页的翻找自己需要的内容，如果说这些资料在面试官手中不小心散落一地，结果可想而知。这样的求职者在面试官眼中也一定不是一个让人放心、有条不紊的员工。当然如果检查时发现资料没有带全，也不要紧张。反而你要庆幸幸亏及时检查，也有足够的时间组织语言去向面试官解释。

第三：面试之前将通信工具调成振动或关闭状态

虽然说面试者与面试官之间是一个平等的关系，但毕竟你是去人家公司求职的，始终处于一个被动的状态，所以最起码的尊重还是要做到的。曾经有调查显示，对于面试过程中接电话或是被电话打断的求职者，会被HR减分。

第四：等候面试官时，仔细观察多了解面试公司

在等候面试官时，可以暗自观察一下公司的大体情况比如员工的着装风格、公司的LOGO或是贴在墙上的企业文化、公司的环境等等，一来可以在接下来的面试过程中表现出自己对公司的认同感，二来也可以让自己对求职公司多些了解，以确定是否要接受这里的工作。如果你身边有公司的资料宣传架，不妨取一本翻看一下，也会增加HR对你的好感。

第五：放松心情，保持自信

面试时一定要保持一定的自信，这样也会给面试官留下很好的印象。面试只是你步入工作的第一步，即便是失败了那也是人生重要的经历。失败是为了更好的迎接下一个挑战。

作为一名web前端工程师千万不要觉得懂技术面试就能万事大吉了，像以上五点细节性的东西也是一定要掌握的。

面试题系列：

网页链接

8. 关于webpack问题想请教下

webpack --config 配置文件
意思就是指定打包的配置文件来运行
一般都是分dev和build,也就是开发环境和生产环境，因为开发环境需要很多的调试信息或者其他的特殊配置来方便开发，而打包成生产环境的文件则不需要，所以可以按照需要分成多个配置文件。
还是推荐再多在webpack官方多学习下文档

9. webpack问题。。。，。。。，

webpack-dev-server有两种推荐的用法
1、命令行方式。这个取决于你的webpack.config.js文件，然后调用“node_moles/.bin/webpack-dev-server”
2、npm script的方式。

可能你文件路径或者调用命令行写法有误吧

10. 大厂的前端面试难吗

分享给你一些面试题

一面

小米的面试官给人的感觉很亲切很真诚，是一个体验很不错的面试。

• css 实现图片自适应宽高

• 讲 flex，手写出 flex 常用的属性，并且讲出作用

• BFC 是什么

• 项目里面的前端鉴权是怎么实现的？

• vue 里面的虚拟 dom 是怎么回事？

• vue 双向绑定讲一讲

• 手写函数防抖和函数节流

• 讲讲常用的 es6 语法，比如 let、promise、class 等等

• 浏览器渲染过程，回流重绘等等，load、DOMContentLoaded 等等事件的触发顺序

• 从小米应用商店里面随便找了一个需求让我现场实现，写伪代码

二面

• 讲项目里面的鉴权和图片懒加载怎么实现的

• 讲 vue-lazyloader 的原理，手写伪代码

• 讲 express 框架的设计思想

• 线上日志是如何处理的

• 讲事件循环

• 讲 nodejs 的 eventEmitter 的实现

三面

• 讲项目里面做的事情

• 讲 vue 的响应式原理、依赖收集、监听数组、虚拟 dom 等等

• 讲 express 的中间件系统是如何设计的

• 现场从小米应用商店中找出一个需求现场实现，说思路，写关键的代码

• 四面

• 讲 vue-lazyloader 源码以及设计

• 使用 es5 实现 es6 的 class

• websocket 握手过程

• 浏览器的事件循环和 nodejs 事件循环的区别

百思编程（过）

这个公司是猎头推荐的，CEO 比较强势，也算比较有趣。

一面

• 跨域以及解决办法

• 手写一段小算法

• JavaScript 的 sort 方法内部使用的什么排序？

二面

这一面是 CEO 面，主要问了我的职业规划等等问题，在我没有表现出很强的要去该公司的意愿后，直接给我送走了…

ponyAI-基础架构（过）

一面

• 讲项目里面干了啥

• vue-lazyloader 怎么实现的

• vue 的响应式系统、虚拟 dom

• 函数式编程

• 手写了一个算法题

二面

这轮面试时从美国打电话过来的，事后才知道是 Google 的前端…

• 讲讲项目里面做了什么

• vue 原理，和 react 的区别（其实我没怎么用过 react）

• JavaScript 异步的处理方式，现场出了一个问题，使用 promise 实现

三面

• 讲项目模块规划、项目如何部署、如何优化等等

• 手写函数的防抖

• 手写一道算法题

四面

• 讲讲项目

• 手写一道算法题

洋钱罐（过）

一面

• 讲项目

• 前端持久化的方式、区别

• vue-lazyloader 的原理

• 怎么配 webpack

• 手写 vue 双向绑定

• 讲 es6 的一些特性，并且现场出了几个代码片段，说结果

• 手写一道算法题

• http 状态码

二面

• 讲项目

• vue-router 的原理

• 项目中怎么用的 webpack，怎么优化

• 讲 express 的设计原理

• 手写一道算法题

创新奇智（过）

一面

• 讲项目

• 手动实现 parseInt

二面

这一面居然遇到了前同事…写了一些笔试题，问了一些问题！

三面

• 讲 tcp/ip 网络层、三次握手，为什么不能两次握手

• 讲 vue 原理

• 手写一道算法题

猿辅导（跪）

猿辅导好像总共就一面，期间一些实现方式和面试官有争议（没有冲突）。

一面

• 手写 vue 的 mixin 方法

• 手写 promise 的 all 方法

• 现场出了一个移动端的小需求

搜狐-垂直媒体部门（过）

一面

• 讲项目

• 项目里面用 nodejs 做了啥

• 抽取了哪些 vue 组件

二面

• 讲项目

• 手写实现 promise

• 腾讯-地图（跪）

• 腾讯两个部门面试都会先做一套笔试题，笔试题基本就是一些常见的前端问题以及算法题

三面

• 讲项目，对项目提了一些问题

• 怎么判断一个点是否在圆形内、正方形内

• 对笔试题

腾讯-天天快报（跪）

也是先做了一套笔试题，但是令人尴尬的是，面试官觉得我快排写错了，然而我只是在原地快排没有申请额外空间…

• 笔试题

• 没了

网络-网络云（过）

这个部门今年据说升为一级部门了，好像还挺不错的~

一面

• 讲项目

• vue 响应式原理，什么是 mvvm

• es6 使用过的特性

• flex 常见的属性

• css 选择器的优先级

• 抽取过哪些 vue 组件

二面

• 讲项目

• express 设计原理，面试官对动态路由匹配一直追问下去，但是这里的源码设计我确实是忘了，一路讨论下去扯到了字符串的前缀树…

• 实现一个事件发布订阅类，其实就是 eventEmitter

三面

三面是山大老学长，聊了一些业务上的事情~

搜狗-手机搜狗（过）

搜狗一面的体验比较差，面试官给人的感觉不太好…

一面

• 讲项目

• 事件循环

• 回调函数的坏处

• vue 里面哪儿不会用到双向绑定

二面

忘了…

快手-商业化（过）

一面

• 讲项目

• 如何抽取公共组件的

• vue 的响应式原理

• 如何实现一个可设置过期时间的 localStorage

• 实现一个发布订阅系统，包括 on、emit、off 等等

二面

• 一道智力题

• 软件工程思想、设计模式等等

• async/await 代码片段，说输出结果

今日头条-广告系统（过）

一面

• 讲项目

• 讲 lazyloader 实现

• 用 docker 做了什么

• 用 webpack 做了什么

• 手写一个算法题

• 讲 flex

• vue 响应式原理

• es6

二面

• JavaScript 异步

• 优化项目

• vue 原理，包括计算属性、依赖收集等等

• 用 JavaScript 的异步实现 sleep 函数

• 算法题

三面

• 手写快排，时间复杂度，优化

• 手写实现 jsonp

• 项目部署，线上问题等等

• websocket 握手过程

四面

• 对 vuex 的理解，单向数据流

• 设计一个单点登录的系统，类似阿里系那种

• 手写一个算法

五面

• 实现一个联想搜索组件

• 手写函数防抖和节流

OPPO 成都研发中心（过）

一面

• 讲项目

• 讲 vue 的 响应式系统，讲了好久，从渲染 watcher 到虚拟 dom，面试官还跟我讨论了好久

• 忘了

二面

• 讲项目

• 忘了

百词斩（跪）

首先会在线做一道算法题，挺简单的，百词斩感觉挂的稀里糊涂的…

一面

• websocket 握手过程

• tcp/ip 网络层，http 的特点

• http 强行使用 udp 能实现吗？

• vue 原理

• webpack 热更新原理，使用过的插件

• 原型、闭包、跨域

• 手写了一道算法题

为什么面这么多公司

因为我是实习直接转正的，也没参加过秋招，所以对自己在市场上是个怎样的实力没有一个清晰的了解，而且我也想多了解一下其他公司在做什么，于是就尽量的多面，不过说实话面试确实挺累的。