工程化&代码管理高频面试题

1. git常用命令以及工作中都怎么工作

git init 初始化仓库
​
git status 查看当前各个区域的代码状态。
​
git log查看commit记录
​
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 pull下拉对应分支代码
​
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。

如果当前版本代码需要回退（功能不做了，要么要去先着急干别的）， 执行git reset --hard， 再回到当前的commit也是git reset 只不过需要注意，此时要通过git reflog来查看时间最后的一次commit。

2. sass和 scss的区别

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

scss只是sass的一个语言版本，.scss文件的特点是层级靠{}来区分，.sass文件的特点的层级靠缩进来区分

3. 前端工程化工具

gulp&webpack

gulp -src=>pipe(scss翻译).pipe(css 合并).pipe(css压缩)=>dist
gulp -src=>pipe(模块化编译).pipe(js压缩)=>dist
    流程化
webpack
    模块化 默认支持的commonjs规范
​
所有js模块打包生成一个js文件
编译解析浏览器不能识别的语言 （scss ,.vue, jsx, ts, ES6） 
​
配置？
 入口
 出口
 devserver 启动 自动刷新，热更新， 反向代理
 sourcemap-调试代码 .map （地图）
​
 loaders: sass-loader css-loader file-loader  babel-loader vue-loader postcss-loader
​
 plugin:  压缩, 提取公共库
​

4. webpack配置并且是否熟知代码分割流程及操作

webpack包含mode模式、entry入口、output出口、plugins插件、loader、resolve、devServer开发服务器相关的基本配置。

在webpack中可以通过多入口的配置，每个入口都会去查询对应的依赖关系图，进行单独的代码。

在模块化开发过程中往往会将各种不同类型的文件都看做是模块来进行互相导入导出，比如将图片、css、sass之类的文件都可以导入到js文件中，但是在打包的过程中需要将这些文件都寻找到然后单独的分离出去，这样就需要用到对应的loader来进行文件处理，不同的文件、不同的loader，处理方式也不一样。

比如css文件可以利用style-loader将其代码生成style标签放入到head中，也可以利用minicssextra插件中 loader将其抽离成css文件。

img文件可以利用url-loader和file-loader对其进行base64的转化或者单独抽出。

组件模块化导入的时候可以采用懒加载的形式，就会单独打包对应的代码。

5. webpack 4大核心理念， 编译原理?

entry,output , loaders , pluguins ​ 一切皆为模块，由于webpack只支持js文件，所以需要用loader 转换为webpack支持的模块，其中plugin 用于扩张webpack 的功能，在webpack构建生命周期的过程中，在合适的时机做了合适的事情。

6. webapck构建优化实战 (打包时间过长， 可以优化时间短点 20s)

（1）提取公共库， 避免重复引用。  使用 DllPlugin，把第三方库文件分离出来单独编译，并且缓存; 极大的减少业务页面的编译时间  
 dll方式也就是通过配置，告诉webpack指定库在项目中的位置，从而直接引入，不将其打包在内。
 
（2）happypack, 多线程解析文件，如babel-loader等耗时较长的。 
还可以配合cache-loader使用。 
（3）缓存  cache-loader 
（4）  loaders应尽可能配置解析路径include参数，排除路径exclude参数， 减少解析时查询范围。 
（5）dev 阶段 devtool 设置成cheap-module-eval-source-map， 已经能满足调试需求， 编译能更快。 
（6）product 阶段 去掉source-map