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早已通过时。