1、什麼是webpack，與grunt和gulp有啥不同
webpack是一個模塊打包工具，在webpack裏面一切皆模塊
通過loader轉換文件，通過plugin注入鉤子，最後輸出有多個模塊組合成的文件
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到Js模塊以及其它的一些瀏覽器不能直接運行的拓展語言，並將其打包爲合適的格式以供瀏覽器使用
Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優點使得在很多場景下可以替代Gulp/Grunt類的工具
Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務的具體步驟，工具之後可以自動替你完成這些任務
Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用 loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件
gulp和grunt需要開發者將整個前端構建過程拆分成多個Task，併合理控制所有Task的調用關係
webpack需要開發者找到入口，並需要清楚對於不同的資源應該使用什麼Loader做何種解析和加工
2、webpack的優缺點
優點：
1）專注於處理模塊化的項目，能做到開箱即用，一步到位
2）可通過plugin擴展，方便、靈活
3）社區龐大活躍，經常引入新特性
4）良好的開發體驗
webpack的缺點是隻能用於採用模塊化開發的項目
3、分別介紹bundle，chunk，module是什麼
bundle:是由webpack打包出來的文件
chunk:代碼塊，一個chunk由多個模塊組合而成，用於代碼的合併和分割
module:是開發中的單個模塊，一個模塊對應一個文件，webpack會從配置的entry中遞歸開始找出所有依賴的模塊
4、什麼是loader？ 什麼是plugin，兩者區別
loader：模塊轉換器，用於把模塊原內容按照需求轉換成新內容
通過使用不同的Loader，Webpack可以要把不同的文件都轉成JS文件,比如CSS、ES6/7、JSX等
plugin：擴展插件
在 Webpack 構建流程中的特定時機注入擴展邏輯來改變構建結果或做你想要的事情
一個插件是含有apply方法的一個對象，通過這個方法可以參與到整個webpack打包的各個流程
loader是用來對模塊的源代碼進行轉換,而插件目的在於解決 loader 無法實現的其他事
因爲plugin可以在任何階段調用,能夠跨Loader進一步加工Loader的輸出
5、什麼是模塊熱更新？
模塊熱更新是webpack的一個功能，他可以使得代碼修改過後不用刷新瀏覽器就可以更新，是高級版的自動刷新瀏覽器
devServer中通過hot屬性可以空時模塊的熱替換
//通過配置文件
const webpack = require('webpack');
const path = require('path');
let env = process.env.NODE_ENV == "development" ? "development" : "production";
const config = {
mode: env,
devServer: {
hot:true
}
}
plugins: [
new webpack.HotModuleReplacementPlugin(), //熱加載插件
],
module.exports = config;
6、幾個常見的plugin和常見的loader
plugin:
html-webpack-plugin 爲html文件中引入的外部資源，可以生成創建html入口文件
mini-css-extract-plugin 分離css文件
clean-webpack-plugin 刪除打包文件
HotModuleReplacementPlugin 熱更新應用
copy-webpack-plugin 拷貝靜態文件
terser-webpack-plugin 通過TerserPlugin壓縮ES6代碼
loader:
css-loader 加載 CSS，支持模塊化、壓縮、文件導入等特性
image-loader 加載並且壓縮圖片文件
babel-loader 把 ES6 轉換成 ES5
style-loader 把 CSS 代碼注入到 JavaScript 中，通過 DOM 操作去加載 CSS
file-loader 把文件輸出到一個文件夾中，在代碼中通過相對 URL 去引用輸出的文件
source-map-loader 加載額外的 Source Map 文件，以方便斷點調試
7、如何可以自動生成webpack配置？
webpack-cli /vue-cli /etc …腳手架工具
8、webpack-dev-server和http服務器如nginx有什麼區別?
webpack-dev-server使用內存來存儲webpack開發環境下的打包文件
並且可以使用模塊熱更新，他比傳統的http服務對開發更加簡單高效。
**9、webpack構建過程 **
從entry裏配置的module開始遞歸解析entry依賴的所有module
每找到一個module，就會根據配置的loader去找對應的轉換規則
對module進行轉換後，再解析出當前module依賴的module
這些模塊會以entry爲單位分組，一個entry和其所有依賴的module被分到一個組Chunk
最後webpack會把所有Chunk轉換成文件輸出
在整個流程中webpack會在恰當的時機執行plugin裏定義的邏輯
10、什麼是entry,output
entry入口，告訴webpack要使用哪個模塊作爲構建項目的起點，默認爲./src/index.js
output出口，告訴webpack在哪裏輸出它打包好的代碼以及如何命名，默認爲./dist
11、webpack如何配置單頁面和多頁面的應用程序？
//單個頁面
module.exports = {
entry: './path/to/my/entry/file.js'
}
//多頁面應用程序
module.entrys = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js'
}
}
12、什麼是長緩存？在webpack中如何做到長緩存優化？
瀏覽器在用戶訪問頁面的時候，爲了加快加載速度會對用戶訪問的靜態資源進行存儲，但是每一次代碼升級或更新都需要瀏覽器下載新的代碼，最簡單方便的方式就是引入新的文件名稱
webpack中可以在output中指定chunkhash，並且分離經常更新的代碼和框架代碼。通過NameModulesPlugin或HashedModuleIdsPlugin使再次打包文件名不變
Git篇
1、Git和SVN的區別
git是分佈式版本控制，svn是集中式版本控制（核心區別）
git相對於svn的優勢就是不需要網絡即可版本控制
git把內容按數據方式存儲，而SVN是按文件
git可以是公用的，可以分享，svn基本是公司內部才能訪問，網外不方便訪問
git不依賴中央服務器，即使服務器有問題也不受影響，svn依賴服務器，一旦服務器有問題就會受影響
git沒有一個全局的版本號，svn有
2、git工作流程
1）在工作目錄中修改某些文件
2）對修改後的文件進行快照，然後保存到暫存區域
3）提交更新，將保存在暫存區域的文件快照永久轉儲到Git目錄中
3、fetch、merge、pull的區別
pull相當於git fetch 和git merge，即更新遠程倉庫的代碼到本地倉庫，然後將內容合併到當前分支
git fetch：相當於是從遠程獲取最新版本到本地，不會自動merge
git merge：將內容合併到當前分支
git pull：相當於是從遠程獲取最新版本並merge到本地
4、分支的相關命令
創建分支：git branch 分支名
查看分支：git branch
切換分支：git checkout 分支名
創建並切換分支：git checkout -b 分支名
合併分支：git merge
查看已經合併的分支/未合併的分支：git branch --merge / git branch --no-merge
刪除的已合併的分支/未合併的分支：git branch -d 分支名 / git branch -D 分支名
5、git merge和git rebase的區別
兩個都代表合併
git merge操作會在當前分支上生成一個新的commit節點，並保留所有的操作歷史節點,會按照commit時間順序排列
rebase操作後的歷史並不會按commit時間順序排列， 一旦分支中的提交對象發佈到公共倉庫，就不要對該分支進行rebase操作
6、解決分支合併衝突
分支提交衝突：當分支對某文件某句話進行修改後，切換到主分支也對該文件該句話進行修改，使用git merge進行合併，需要將兩個修改進行合併。此時合併產生衝突
解決方法：
1）git status查看衝突文件
2）編輯器打開衝突文件，查看內容。Git用<<<<<<<，=======，>>>>>>>標記出不同分支的內容
3）修改文件內容
4）提交 git add file ; git commit -m “”
查看分支合併圖 git log –graph
7、Git配置相關
8、git常用的命令
1）從遠程庫中克隆項目
git clone 項目地址
2）工作區到暫存區
git add 文件名字、git add . 多個文件操作
3）暫存區到版本區
git commit -m"註釋信息"
4）把版本區文件上傳到遠程倉庫
git push origin master
5）將遠程倉庫的文件拉取/下載下來
git pull origin master
6）查看當前歷史記錄、查看所有的操作記錄
git log、git reflog
7）查看文件狀態
git status
8）查看版本信息
git version
9）查看配置信息
git config --list
10）在當前目錄新建一個Git代碼庫（生成隱藏.git文件）
git init
11）版本回退
git reset --hard 版本id
12）查看xx文件修改了哪些內容
git diff xx
13）刪除文件名
git rm 文件名
14）恢復一個文件
git checkout
15）關聯一個遠程庫
git remote add [遠程倉庫git地址]
16）移除關聯一個遠程庫
git remote remove [遠程倉庫git地址]
17）創建分支
git branch 分支名
18）查看分支數量
git branch
19）切換分支
git checkout 分支名
20）創建並切換分支
git checkout -b 分支名
21）當文件修改時切換分支
git stash 暫存文件
22）合併分支
git merge
23）合併指定分支到當前分支
git merge [branch]
24）查看已合併的分支
git branch --merge
25）查看未合併的分支
git branch --no-merge
26）查看遠程分支
git branch -r
27）刪除未合併的分支
git branch -D 分支名
28）刪除已合併的分支
git branch --
29）刪除遠程分支
git branch -d 分支名
30）生成一個可供發佈的壓縮包
git archive
9、什麼是 fork？fork、分支和克隆之間有什麼區別
fork是對存儲倉庫進行拷貝
clone克隆是個對某個遠程倉庫的本地拷貝，實際上是拷貝整個源存儲倉庫，包括所有歷史記錄和分支
branch分支是一種機制，用於處理單一存儲倉庫中的變更，並最終目的是用於與其他部分代碼合併
10、什麼時候應使用 “git stash”？
git stash 命令把你未提交的修改保存以供後續使用，以後就可以從工作副本中進行還原