千锋教育web前端高频面试题视频教程,kerwin大话前端面试秘籍(附答案...

代码管理与工程化webpack
1、git常用命令以及工作中都怎么工作
git常用命令:
初始化仓库:git init
查看当前各个区域的代码状态:git status
查看commit记录:git log
查看完整记录:git reflog
添加工作区代码到暂存区:git add
暂存区代码的提交:git commit
代码的版本回退:git reset
将暂存处代码收起来:git stash
将收起来的箸存区的代码释放出来:git stash pop
打标签:Git tag
基于当前分支创建一个分支:Git branch
切换分支:git checkout
合并分支:git merge
添加远端仓库地址:git remote add origin
克隆仓库:git clone
下拉对应分支代码:git pu11
上传对应分支代码:git push
在公司中每一个项目都会有一个对应的远端仓库(gitLab),我们需要创建账号并配置权限。 一般公司会有几个主要分支,分别对应4个环境,当代码更新的时候会通过流水线自动部署到对应的环境:
1、发布分支(prod、master)这个分支代码对应的就是线上的代码
2、UAT分支(uat),这个分支上的代码对应的是公司内部演示用的分支
3、TEST分支(test),这个分支的代码是用于测试
4、DEV分支(dev),研发自测分支
正常功能开发或者bug修复,从dev分支拉取代码,进行开发就可以。 如果是解决线上bug,应该从master拉取一个分支(hotfix_),然后开发完成后将其合并到test或者uat,测试没有问题后,将其合并到master。还要将hotfix上对应的commit合并到dev分支,专业dev分支也就修复了这个bug.
2、sass和scss的区别
sass是一款强化 cSs的辅助工具,它在CSS 语法的基础上增加了变量(variables)、嵌套(nested rules)、混合(mixins)、导入(inline imports)等高级功能,这些拓展令 cSS更加强大与优雅。使用Sass 以及 Sass的样式库(如Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。
scss只是sass的一个语言版本,.scss文件的特点是层级靠{}来区分,.sass文件的特点的层级靠缩进来区分
3、前端工程化工具webpack
webpack:模块化打包工具,默认支持的commonjs规范,会把所有的js模块打包生成一个js文件,把浏览器不识别的语言转化成能识别的语言
配置:入口 、出口 、devserver:启动自动刷新,热更新,反向代理、sourcemap:调试代码.map(地图)
1oaders: sass-loaderh【会把sass解析成css】 css-1oader【把css模块化处理】 file-1oader【把file当成模块化】babe1-1oader【把ES6转化成js】 vue-1oader【把vue代码转化成js】 postcss-1oader
plugin:压缩,提取公共库
4、webpack配置并且是否熟知代码分割流程及操作
webpack包含mode模式、entry入口、output出口、plugins插件、loader、resolve、devServer开发服务器相关的基本配置。
在webpack中可以通过多入口的配置,每个入口都会去查询对应的依赖关系图,进行单独的代码。
在模块化开发过程中往往会将各种不同类型的文件都看做是模块来进行互相导入导出,比如将图片、css、sass之类的文件都可以导入到s文件中,但是在打包的过程中需要将这些文件都寻找到然后单独的分离出去,这样就需要用到对应的loader来进行文件处理,不同的文件、不同的loader,处理方式也不一样。比如css文件可以利用style-loader将其代码生成style标签放入到head中。
代码分割:在开发过程中,尤其是在做vue,react的单页面应用的时候会把所有js合在一起,单页面应用其实就是不同的div在切换显示,在首屏加载的时会把整个js加载进来,所以要进行代码分割去优化首屏加载速度,实现方式:在组件模块化导入的时候可以采用懒加载的形式,就会单独打包对应的代码。
5、webpack 4大核心理念,编译原理?
大核心理念:entry,output , loaders , pluguins
编译原理:一切皆为模块,由于webpack只支持js文件,所以需要用loader转换为webpack支持的模块,其中plugin用于扩张webpack 的功能,在webpack构建生命周期的过程中,在合适