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