前端面试题整理—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 命令把你未提交的修改保存以供后续使用，之后就能够从工做副本中进行还原