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 命令把你未提交的修改保存以供后續使用，以后就可以從工作副本中進行還原