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

git init 初始化倉庫
?
git status 查看當(dāng)前各個(gè)區(qū)域的代碼狀態(tài)。
?
git log查看commit記錄
?
git reflog查看完整記錄
?
git add 添加工作區(qū)代碼到暫存區(qū)
?
Git commit 暫存區(qū)代碼的提交
?
git reset 代碼的版本回退
?
git stash 將暫存處代碼收起來
?
git stash pop 將收起來的暫存區(qū)的代碼釋放出來
?
Git tag 可以打標(biāo)簽
?
Git branch 基于當(dāng)前分支創(chuàng)建一個(gè)分支
?
git checkout 切換分支
?
git merge 合并分支
?
git remote add origin 添加遠(yuǎn)端倉庫地址
?
git clone 克隆倉庫
?
git pull下拉對應(yīng)分支代碼
?
git push 上傳對應(yīng)分支代碼
?
?

公司中每一個(gè)項(xiàng)目都會(huì)有一個(gè)對應(yīng)的遠(yuǎn)端倉庫（gitLab），我們需要?jiǎng)?chuàng)建賬號(hào)并配置權(quán)限。

一般公司會(huì)有幾個(gè)主要分支，分別對應(yīng)4個(gè)環(huán)境，當(dāng)代碼更新的時(shí)候會(huì)通過流水線自動(dòng)部署到對應(yīng)的環(huán)境：

1. 發(fā)布分支（prod、master）這個(gè)分支代碼對應(yīng)的就是線上的代碼

2. UAT分支（uat），這個(gè)分支上的代碼對應(yīng)的是公司內(nèi)部演示用的分支

3. TEST分支（test），這個(gè)分支的代碼是用于測試

4. DEV分支（dev），研發(fā)自測分支

正常功能開發(fā)或者bug修復(fù)， 從dev分支拉取代碼，進(jìn)行開發(fā)就可以。

如果是解決線上bug，應(yīng)該從master拉取一個(gè)分支（hotfix__）, 然后開發(fā)完成后將其合并到test或者uat，測試沒有問題后，將其合并到master。還要將hotfix上對應(yīng)的commit合并到dev分支， 專業(yè)dev分支也就修復(fù)了這個(gè)bug。

如果當(dāng)前版本代碼需要回退（功能不做了，要么要去先著急干別的）， 執(zhí)行g(shù)it reset --hard， 再回到當(dāng)前的commit也是git reset 只不過需要注意，此時(shí)要通過git reflog來查看時(shí)間最后的一次commit。

2. sass和 scss的區(qū)別

Sass 是一款強(qiáng)化 CSS 的輔助工具，它在 CSS 語法的基礎(chǔ)上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導(dǎo)入 (inline imports) 等高級(jí)功能，這些拓展令 CSS 更加強(qiáng)大與優(yōu)雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助于更好地組織管理樣式文件，以及更高效地開發(fā)項(xiàng)目。

scss只是sass的一個(gè)語言版本，.scss文件的特點(diǎn)是層級(jí)靠{}來區(qū)分，.sass文件的特點(diǎn)的層級(jí)靠縮進(jìn)來區(qū)分

3. 前端工程化工具

gulp&webpack

gulp -src=>pipe(scss翻譯).pipe(css 合并).pipe(css壓縮)=>dist
gulp -src=>pipe(模塊化編譯).pipe(js壓縮)=>dist
    流程化
webpack
 ? ?模塊化 默認(rèn)支持的commonjs規(guī)范
?
所有js模塊打包生成一個(gè)js文件
編譯解析瀏覽器不能識(shí)別的語言 （scss ,.vue, jsx, ts, ES6） 
?
配置？
 入口
 出口
 devserver 啟動(dòng) 自動(dòng)刷新，熱更新， 反向代理
 sourcemap-調(diào)試代碼 .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開發(fā)服務(wù)器相關(guān)的基本配置。

在webpack中可以通過多入口的配置，每個(gè)入口都會(huì)去查詢對應(yīng)的依賴關(guān)系圖，進(jìn)行單獨(dú)的代碼。

在模塊化開發(fā)過程中往往會(huì)將各種不同類型的文件都看做是模塊來進(jìn)行互相導(dǎo)入導(dǎo)出，比如將圖片、css、sass之類的文件都可以導(dǎo)入到j(luò)s文件中，但是在打包的過程中需要將這些文件都尋找到然后單獨(dú)的分離出去，這樣就需要用到對應(yīng)的loader來進(jìn)行文件處理，不同的文件、不同的loader，處理方式也不一樣。

比如css文件可以利用style-loader將其代碼生成style標(biāo)簽放入到head中，也可以利用minicssextra插件中 loader將其抽離成css文件。

img文件可以利用url-loader和file-loader對其進(jìn)行base64的轉(zhuǎn)化或者單獨(dú)抽出。

組件模塊化導(dǎo)入的時(shí)候可以采用懶加載的形式，就會(huì)單獨(dú)打包對應(yīng)的代碼。

5. webpack 4大核心理念， 編譯原理?

entry,output , loaders , pluguins ? 一切皆為模塊，由于webpack只支持js文件，所以需要用loader 轉(zhuǎn)換為webpack支持的模塊，其中plugin 用于擴(kuò)張webpack 的功能，在webpack構(gòu)建生命周期的過程中，在合適的時(shí)機(jī)做了合適的事情。文章來源地址http://www.zghlxwxcb.cn/news/detail-820470.html

6. webapck構(gòu)建優(yōu)化實(shí)戰(zhàn) (打包時(shí)間過長， 可以優(yōu)化時(shí)間短點(diǎn) 20s)

（1）提取公共庫， 避免重復(fù)引用。  使用 DllPlugin，把第三方庫文件分離出來單獨(dú)編譯，并且緩存; 極大的減少業(yè)務(wù)頁面的編譯時(shí)間 ?
 dll方式也就是通過配置，告訴webpack指定庫在項(xiàng)目中的位置，從而直接引入，不將其打包在內(nèi)。
 
（2）happypack, 多線程解析文件，如babel-loader等耗時(shí)較長的。 
還可以配合cache-loader使用。 
（3）緩存  cache-loader 
（4）  loaders應(yīng)盡可能配置解析路徑include參數(shù)，排除路徑exclude參數(shù)， 減少解析時(shí)查詢范圍。 
（5）dev 階段 devtool 設(shè)置成cheap-module-eval-source-map， 已經(jīng)能滿足調(diào)試需求， 編譯能更快。 
（6）product 階段 去掉source-map 

到了這里，關(guān)于工程化&代碼管理高頻面試題的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！