webpack和git知識點總結

一.webpack和gulp的比較（https://segmentfault.com/a/1190000013998339?utm_source=tag-newest/*&^%$ 問題查找，內容很好）

打包主要解決的問題有：

1.文件依賴管理 2.資源加載管理 3.效率與優化管理

打包工具的結構應該是tool+plugins的結構，tool提供基礎能力，即文件依賴管理和資源加載管理，在此基礎上經過一系列的plugins來豐富打包工具的能力，plugins相似互聯網+的概念，文件經plugins處理以後，具有餓web渲染中的某種優點

chunk表示一個文件，默認狀況下webpack的輸入是一個入口文件，輸出也是一個文件，這個文件就是一個chunk，chunkId就是產出時給每一個文件一個惟一標示id，chunkhash就是文件內容的md5值，name就是在entry中制定的key值

 

二.webpack面試題 概念

問題一：什麼是webpack和grunt和gulp有什麼不一樣（code-splitting，懶加載和緩存都沒有實際操做過，熱更新已經手動操做過，如今先把概念弄明白，而後就開始看es6）

答案：Webpack是一個模塊打包器，他能夠遞歸的打包項目中的全部模塊，最終生成幾個打包後的文件。他和其餘的工具最大的不一樣在於他支持code-splitting、模塊化(AMD，ESM，CommonJs)、全局分析。

code-splitting能夠用於兩個方面，一個是抽取公共代碼，另外一個是懶加載，其中和抽取公共代碼的有：多個入口，或者使用CommonsChunkPlugin 或者是SplitChunkPlugin，和懶加載（也就是按需加載）有關的是：require.ensure（）；

HtmlWebpackPlugin has created an entirely new file for you and that all the bundles are automatically added.

概念問題二：什麼是bundle,什麼是chunk，什麼是module?

答案：bundle是由webpack打包出來的文件，chunk是指webpack在進行模塊的依賴分析的時候，代碼分割出來的代碼塊。module是開發中的單個模塊。

概念問題三：什麼是Loader?什麼是Plugin?（什麼是apply方法，這個更是不明白，比較深刻的知識點）

答案： 1）Loaders是用來告訴webpack如何轉化處理某一類型的文件，而且引入到打包出的文件中 2）Plugin是用來自定義webpack打包過程的方式，一個插件是含有apply方法的一個對象，經過這個方法能夠參與到整個webpack打包的各個流程(生命週期)。

extract-text-webpack-plugi：從打包的js文件中抽出特定的text到一個單獨的文件中。

配置問題:如何能夠自動生成webpack配置？

答案： webpack-cli /vue-cli /etc ...腳手架工具

開發問題一：webpack-dev-server和http服務器如nginx有什麼區別?

答案：webpack-dev-server使用內存來存儲webpack開發環境下的打包文件，而且可使用模塊熱更新，他比傳統的http服務對開發更加簡單高效。

開發問題二:什麼 是模塊熱更新？

答案:模塊熱更新是webpack的一個功能，他可使得代碼修改事後不用刷新瀏覽器就能夠更新，是高級版的自動刷新瀏覽器。

它的好處是：1.能夠維持程序如今的狀態，這個狀態若是瀏覽器刷新的話 就會變沒了；2.節省大量的開發時間；

3.當css樣式改變了的時候，能夠在瀏覽器端當即展示出來

所謂熱加載功能，就是每次修改某個js文件後，頁面局部更新

它的基本實現原理是，在構建bundle的時候，加入一段runtime和服務通信的代碼，修改代碼會致使webpack的重構，服務器端通知瀏覽器端頁面有更新，瀏覽器經過jsonp來加載修改的模塊，並經過webpack的熱替換原理來實現模塊的從新替換。

優化問題一：什麼是長緩存？在webpack中如何作到長緩存優化？（部分看懂）

答案：瀏覽器在用戶訪問頁面的時候，爲了加快加載速度，會對用戶訪問的靜態資源進行存儲，可是每一次代碼升級或是更新，都須要瀏覽器去下載新的代碼，最方便和簡單的更新方式就是引入新的文件名稱。在webpack中能夠在output縱輸出的文件指定chunkhash,而且分離常常更新的代碼和框架代碼。經過NameModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不變。

一張方式是經過抽取manifest data的數據的方式，由於manifest data的數據每次打包的時候都會改變，從而影響數據文件的緩存優化。

The manifest data can be extracted into a json file for easy consumption using the WebpackManifestPlugin.

 

In a typical application or site built with webpack, there are three main types of code:

1. The source code you, and maybe your team, have written.
2. Any third-party library or "vendor" code your source is dependent on.
3. A webpack runtime and manifest that conducts the interaction of all modules.

Manifest 文件主要是用來模塊之間的交互 ，Using the data in the manifest, the runtime will be able to find out where to retrieve the modules behind the identifiersAs the compiler enters, resolves, and maps out your application, it keeps detailed notes on all your modules.

Runtime 主要是懶加載的功能，以及load和resolve的功能代碼It contains the loading and resolving logic needed to connect your modules as they interact. This includes connecting modules that have already been loaded into the browser as well as logic to lazy-load the ones that haven't.

By using content hashes within your bundle file names, you can indicate to the browser when the contents of a file has changed thus invalidating the cache. Once you start doing this though, you'll immediately notice some funny behavior. Certain hashes change even when their contents apparently do not. This is caused by the injection of the runtime and manifest which changes every build.

優化問題二：什麼是Tree-shaking?CSS能夠Tree-shaking嗎

答案：Tree-shaking是指在打包中去除那些引入了，可是在代碼中沒有被用到的那些死代碼。在webpack中Tree-shaking是經過uglifySPlugin來Tree-shaking JS。Css須要使用Purify-CSS。

經常使用的插件：(壓縮插件->uglifyjs-webpack-plugin，自動加載模塊）

在介紹entry的時候，提到chunk的概念，chunk指的就是一個代碼塊，即一個js文件。默認狀況下webpack只產生entry中制定的代碼塊，chunk的個數和entry中的key值個數相等，即單入口的狀況下，默認只產出一個chunk，可是咱們一般但願將入口之間的通用代碼和第三方類庫的代碼提取出來，單獨做爲一個js文件來引用，第三方的文件通常不多變更，能夠利用緩存機制把相關內容緩存起來，通用代碼則能夠便面重複加載

commonChunkPlugin的處理級別是chunk級別，經過指定chunks+minChunks（提取過濾器：通常是被引用的次數）+name（輸出的文件名）來完成操做。

文件間的關係處理

module構建階段：將文件經過loaders+module轉化爲模塊化文件

模塊化文件經過plugins+entry提取，合併成chunks文件，

而後再經過plugins 生產產出文件

 

三.git面試題

1.什麼是 Git 復刻（fork）？復刻（fork）、分支（branch）和克隆（clone）之間有什麼區別？

復刻是對存儲倉庫進行的遠程的，服務器端的拷貝，從源頭上就有所區別，復刻實際上不是Git範疇，它更像是個政治/社會概念

克隆不是復刻，克隆是對某個遠程倉庫的本地拷貝，克隆時，其實是拷貝整個源存儲倉庫，包括全部歷史記錄和分支

分支是一種機制，用於處理單一存儲倉庫中的變動，並最終目的是用於與其餘部分代碼合併

2.拉取請求和分支之間有什麼區別

分支是代碼的獨立分支，拉去請求是對別人寫的代碼拉取到本地

3.git pull 和git fetch的區別

git pull 是上下文環境敏感的，它會把全部的提交自動給你合併到當前分支當中，沒有複查的過程

而git fetch只是把拉去的提交存儲到本地倉庫中，真正合併到主分支中須要使用merage

head指向的是當前分支，fetch的時候本地的master沒有變化，可是與遠程倉庫關聯的那個版本號被更新了，接下來就是本地合併這兩個版本號的代碼，使用git pull會將本地的代碼更新至遠程倉庫裏面最新的代碼版本。

4.如何在git中恢復先前的提交？

git checkout -- file命令中的--很重要，沒有--，就變成了「切換到另外一個分支」的命令，咱們在後面的分支管理中會再次遇到git checkout命令。這個命令的做用就是讓這個文件回到最近一次git commit或git add時的狀態

git reset命令既能夠回退版本，也能夠把暫存區的修改回退到工做區

git reset soft：--soft參數告訴Git重置HEAD到另一個commit，但也到此爲止

git reset hard：--hard參數將會blow out everything.它將重置HEAD返回到另一個commit，重置index以便反映HEAD的變化，而且重置working copy也使得其徹底匹配起來

git reset mixed：--mixed是reset的默認參數，也就是當你不指定任何參數時的參數。它將重置HEAD到另一個commit,而且重置index以便和HEAD相匹配，可是也到此爲止

5.什麼是「git cherry-pick」？（還有沒懂的東西，加-n什麼意思）

命令git cherry-pick一般用於把特定提交從存儲倉庫的一個分支引入到其餘分支中.

6.解釋 Forking 工做流程的優勢（還沒看）

7.告訴我 Git 中 HEAD、工做樹和索引之間的區別？（還沒看）

8.你能解釋下 Gitflow 工做流程嗎？

Gitflow 工做流程使用兩個並行的、長期運行的分支來記錄項目的歷史記錄，分別是 master和 develop 分支。

• Master，隨時準備發佈線上版本的分支，其全部內容都是通過全面測試和核準的（生產就緒）。
  • Hotfix，維護（maintenance）或修復（hotfix）分支是用於給快速給生產版本修復打補丁的。修復（hotfix）分支很像發佈（release）分支和功能（feature）分支，除非它們是基於 master 而不是 develop 分支。
• Develop，是合併全部功能（feature）分支，並執行全部測試的分支。只有當全部內容都通過完全檢查和修復後，才能合併到 master 分支。
  • Feature，每一個功能都應留在本身的分支中開發，能夠推送到 develop 分支做爲功能（feature）分支的父分支。

9.何時應使用 「git stash」？（還不明白怎麼恢復？）

　　保存工做現場，將工做現場保存起來，好比當前的開發尚未進行完整，不能提交，但是如今有個bug急須要解決

10.如何從 git 中刪除文件，而不將其從文件系統中刪除？（部分看懂）

    通常狀況下你從本地工做區刪除了一個文件，那麼能夠用git rm + 文件名的方式，刪除版本庫中的相應文件，而後經過commit 提交

    但是若是隻是刪除了一個本地文件，想要恢復的話，能夠用git checkout --test.txt的方式，恢復到工做去

     命令git rm用於刪除一個文件。若是一個文件已經被提交到版本庫，那麼你永遠不用擔憂誤刪，可是要當心，你只能恢復文件到最新版本，你會丟失最近一次提交後你修改的內容。

11.何時使用「git rebase」代替「git merge」？（部分看懂）

git rebase的目的是爲了全部的提交在一條直線上，沒有雜亂的歷史記錄，當你的提交是在一個過期的分支上的時候，好比其餘合做夥伴對遠程倉庫已經提交了不少，從而本地的master早已通過時。