代碼管理與工程化webpack

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

git常用命令：

初始化倉庫：git init?

查看當(dāng)前各個(gè)區(qū)域的代碼狀態(tài)：git status?

查看commit記錄：git log?

查看完整記錄：git reflog?

添加工作區(qū)代碼到暫存區(qū)：git add?

暫存區(qū)代碼的提交：git commit?

代碼的版本回退：git reset?

將暫存處代碼收起來：git stash?

將收起來的箸存區(qū)的代碼釋放出來：git stash pop?

打標(biāo)簽：Git tag?

基于當(dāng)前分支創(chuàng)建一個(gè)分支：Git branch?

切換分支：git checkout?

合并分支：git merge?

添加遠(yuǎn)端倉庫地址：git remote add origin?

克隆倉庫：git clone?

下拉對(duì)應(yīng)分支代碼：git pu11?

上傳對(duì)應(yīng)分支代碼：git push?

在公司中每一個(gè)項(xiàng)目都會(huì)有一個(gè)對(duì)應(yīng)的遠(yuǎn)端倉庫(gitLab)，我們需要?jiǎng)?chuàng)建賬號(hào)并配置權(quán)限。 一般公司會(huì)有幾個(gè)主要分支，分別對(duì)應(yīng)4個(gè)環(huán)境，當(dāng)代碼更新的時(shí)候會(huì)通過流水線自動(dòng)部署到對(duì)應(yīng)的環(huán)境:

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

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

3、TEST分支(test)，這個(gè)分支的代碼是用于測(cè)試?

4、DEV分支(dev)，研發(fā)自測(cè)分支

正常功能開發(fā)或者bug修復(fù)，從dev分支拉取代碼，進(jìn)行開發(fā)就可以。 如果是解決線上bug，應(yīng)該從master拉取一個(gè)分支(hotfix_),然后開發(fā)完成后將其合并到test或者uat，測(cè)試沒有問題后，將其合并到master。還要將hotfix上對(duì)應(yīng)的commit合并到dev分支，專業(yè)dev分支也就修復(fù)了這個(gè)bug.

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、前端工程化工具webpack

webpack：模塊化打包工具，默認(rèn)支持的commonjs規(guī)范，會(huì)把所有的js模塊打包生成一個(gè)js文件，把瀏覽器不識(shí)別的語言轉(zhuǎn)化成能識(shí)別的語言

配置：入口 、出口 、devserver：啟動(dòng)自動(dòng)刷新，熱更新，反向代理、sourcemap：調(diào)試代碼.map(地圖)

1oaders: sass-loaderh【會(huì)把sass解析成css】 css-1oader【把css模塊化處理】 file-1oader【把file當(dāng)成模塊化】babe1-1oader【把ES6轉(zhuǎn)化成js】 vue-1oader【把vue代碼轉(zhuǎn)化成js】 postcss-1oader

plugin:壓縮，提取公共庫

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

webpack包含mode模式、entry入口、output出口、plugins插件、loader、resolve、devServer開發(fā)服務(wù)器相關(guān)的基本配置。

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

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

代碼分割：在開發(fā)過程中，尤其是在做vue，react的單頁面應(yīng)用的時(shí)候會(huì)把所有js合在一起，單頁面應(yīng)用其實(shí)就是不同的div在切換顯示，在首屏加載的時(shí)會(huì)把整個(gè)js加載進(jìn)來，所以要進(jìn)行代碼分割去優(yōu)化首屏加載速度，實(shí)現(xiàn)方式：在組件模塊化導(dǎo)入的時(shí)候可以采用懶加載的形式，就會(huì)單獨(dú)打包對(duì)應(yīng)的代碼。

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

大核心理念：entry,output , loaders , pluguins?

編譯原理：一切皆為模塊，由于webpack只支持js文件，所以需要用loader轉(zhuǎn)換為webpack支持的模塊，其中plugin用于擴(kuò)張webpack 的功能，在webpack構(gòu)建生命周期的過程中，在合適