前端面試題整理—Webpack+Git篇

時間 2019-11-20

標籤端面試題整理 webpack+git webpack git 欄目 Git 简体版

原文原文鏈接

一、什麼是webpack，與grunt和gulp有啥不一樣css

　　webpack是一個模塊打包工具，在webpack裏面一切皆模塊
　　經過loader轉換文件，經過plugin注入鉤子，最後輸出有多個模塊組合成的文件
　　WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到Js模塊以及其它的一些瀏覽器不能直接運行的拓展語言，並將其打包爲合適的格式以供瀏覽器使用html

　　Gulp/Grunt是一種可以優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優勢使得在不少場景下能夠替代Gulp/Grunt類的工具
　　Grunt和Gulp的工做方式是：在一個配置文件中，指明對某些文件進行相似編譯，組合，壓縮等任務的具體步驟，工具以後能夠自動替你完成這些任務
　　Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用　　loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件
　　gulp和grunt須要開發者將整個前端構建過程拆分紅多個Task，併合理控制全部Task的調用關係
　　webpack須要開發者找到入口，並須要清楚對於不一樣的資源應該使用什麼Loader作何種解析和加工前端

二、webpack的優缺點vue

　　優勢：
　　1）專一於處理模塊化的項目，能作到開箱即用，一步到位
　　2）可經過plugin擴展，方便、靈活　　
　　3）社區龐大活躍，常常引入新特性
　　4）良好的開發體驗
　　webpack的缺點是隻能用於採用模塊化開發的項目webpack

三、分別介紹bundle，chunk，module是什麼nginx

　　bundle:是由webpack打包出來的文件
　　chunk:代碼塊，一個chunk由多個模塊組合而成，用於代碼的合併和分割
　　module:是開發中的單個模塊，一個模塊對應一個文件，webpack會從配置的entry中遞歸開始找出全部依賴的模塊git

四、什麼是loader？什麼是plugin，二者區別web

　　loader：模塊轉換器，用於把模塊原內容按照需求轉換成新內容
　　經過使用不一樣的Loader，Webpack能夠要把不一樣的文件都轉成JS文件,好比CSS、ES6/七、JSX等vue-cli

　　plugin：擴展插件
　　在 Webpack 構建流程中的特定時機注入擴展邏輯來改變構建結果或作你想要的事情
　　一個插件是含有apply方法的一個對象，經過這個方法能夠參與到整個webpack打包的各個流程gulp

　　loader是用來對模塊的源代碼進行轉換,而插件目的在於解決 loader 沒法實現的其餘事
　　由於plugin能夠在任何階段調用,可以跨Loader進一步加工Loader的輸出

五、什麼是模塊熱更新？

　　模塊熱更新是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;

六、幾個常見的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 文件，以方便斷點調試

七、如何能夠自動生成webpack配置？

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

八、webpack-dev-server和http服務器如nginx有什麼區別?

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

九、webpack構建過程　

　　從entry裏配置的module開始遞歸解析entry依賴的全部module
　　每找到一個module，就會根據配置的loader去找對應的轉換規則
　　對module進行轉換後，再解析出當前module依賴的module
　　這些模塊會以entry爲單位分組，一個entry和其全部依賴的module被分到一個組Chunk
　　最後webpack會把全部Chunk轉換成文件輸出
　　在整個流程中webpack會在恰當的時機執行plugin裏定義的邏輯

十、什麼是entry,output

　　entry入口，告訴webpack要使用哪一個模塊做爲構建項目的起點，默認爲./src/index.js

　　output出口，告訴webpack在哪裏輸出它打包好的代碼以及如何命名，默認爲./dist

十一、webpack如何配置單頁面和多頁面的應用程序？

        //單個頁面
        module.exports = {
            entry: './path/to/my/entry/file.js'
        }
        //多頁面應用程序
        module.entrys = {
            entry: {
                pageOne: './src/pageOne/index.js',
                pageTwo: './src/pageTwo/index.js'
            }
        }

十二、什麼是長緩存？在webpack中如何作到長緩存優化？

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

Git篇

一、Git和SVN的區別

　　git是分佈式版本控制，svn是集中式版本控制（核心區別）

　　git相對於svn的優點就是不須要網絡便可版本控制

　　git把內容按數據方式存儲，而SVN是按文件

　　git能夠是公用的，能夠分享，svn基本是公司內部才能訪問，網外不方便訪問

　　git不依賴中央服務器，即便服務器有問題也不受影響，svn依賴服務器，一旦服務器有問題就會受影響

　　git沒有一個全局的版本號，svn有

二、git工做流程

　　1）在工做目錄中修改某些文件

　　2）對修改後的文件進行快照，而後保存到暫存區域

　　3）提交更新，將保存在暫存區域的文件快照永久轉儲到Git目錄中

三、fetch、merge、pull的區別

　　pull至關於git fetch 和git merge，即更新遠程倉庫的代碼到本地倉庫，而後將內容合併到當前分支

　　git fetch：至關因而從遠程獲取最新版本到本地，不會自動merge

　　git merge：將內容合併到當前分支

　　git pull：至關因而從遠程獲取最新版本並merge到本地

四、分支的相關命令　

　　建立分支：git branch 分支名
　　查看分支：git branch
　　切換分支：git checkout 分支名
　　建立並切換分支：git checkout -b 分支名
　　合併分支：git merge
　　查看已經合併的分支/未合併的分支：git branch --merge / git branch --no-merge
　　刪除的已合併的分支/未合併的分支：git branch -d 分支名 / git branch -D 分支名

五、git merge和git rebase的區別

　　兩個都表明合併

　　git merge操做會在當前分支上生成一個新的commit節點，並保留全部的操做歷史節點,會按照commit時間順序排列

　　rebase操做後的歷史並不會按commit時間順序排列，一旦分支中的提交對象發佈到公共倉庫，就不要對該分支進行rebase操做

六、解決分支合併衝突

　　分支提交衝突：當分支對某文件某句話進行修改後，切換到主分支也對該文件該句話進行修改，使用git merge進行合併，須要將兩個修改進行合併。此時合併產生衝突　　

　　解決方法：
　　1）git status查看衝突文件
　　2）編輯器打開衝突文件，查看內容。Git用<<<<<<<，=======，>>>>>>>標記出不一樣分支的內容
　　3）修改文件內容
　　4）提交 git add file ; git commit -m ""
　　查看分支合併圖 git log –graph

七、Git配置相關

八、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

*/

九、什麼是 fork？fork、分支和克隆之間有什麼區別

　　fork是對存儲倉庫進行拷貝

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

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

十、何時應使用「git stash」？

　　git stash 命令把你未提交的修改保存以供後續使用，之後就能夠從工做副本中進行還原