面试总结-webpack/git
说说你对webpack的理解
webpack 是一个静态模块打包器，整个打包过程就像是一条生产线，把资源从入口放进去，经过一系列的加工（loader），最终转换成我们想要的结果，整个加工过程还会有监控，在特定的时机，插件就会对资源做处理
Webpack中Loader和Plugin的区别
- 1、因为webpack只认识JS和JSON，所以Loader相当于翻译官，将其他类型资源进行预处理。
- 2、Plugin功能更强大，主要目的就是解决loader 无法实现的事情，比如打包优化和代码压缩等。
Plugin加载后，在webpack构建的某个时间节点就会触发plugin定义的功能，帮助webpack做一些事情。实现对webpack的功能扩展。
常见的Plugin有哪些
html-webpack-plugin 处理html资源，默认会创建一个空的HTML，自动引入打包输出的所有资源（js/css）
mini-css-extract-plugin 打包过后的css在js文件里，该插件可以把css单独抽出来
clean-webpack-plugin 每次打包时候，CleanWebpackPlugin 插件就会自动把上一次打的包删除 - 3、运行时机
1.loader运行在编译阶段
2.plugins 在整个周期都
为什么要用打包工具（开发环境和生存环境有什么区别）
在没有weapack之前，
- 作用域问题：所有引用的文件，都挂在在window，如jquery
- 文件太大：如果分散加载，内容逐渐显示，如果合并加载文件太大，白屏时间长
- 可读性差：和在一个文件里，可读性差
- 可维护性弱
基本配置：
开发模式配置介绍：
loader：帮助webpack识别不能识别的模块，只要是对，less/scss/style/jsx/tsx/图片/视频
- style-loader
- css-loader
plugins
devServer
webpack优化
1、提升开发体验
-
1、sourceMap
2、提升打包构建速度（一般是对js处理）
1、 开启HMR：修改那个文件只会刷新那一个文件，不会整个页面刷新
- 上面那样配置css就可以生效了
- js还需要另外的配置，react可以使用react-hot-loader来设置
2、oneOf：让我们的文件只被其中一个loader文件处理，每个文件只执行一个loader，提升打包速度
3、Include/Exclude：排除第三方和nodeModule文件，这些不需要编译，只处理src文件，提升打包速度（只能用一种），只能对js进行处理
4、catch：提升第二次编辑及以后的打包速度，第二次打包不会打包所有。只会检查修改的文件进行重新检查和babel编译
5、Thead：多进程打包
配置方法：
js代码压缩：
减少代码体积
1、tree shaking：引用的第三方库中，移除没有引用的工具函数等
2、plugin-transform-runtime：减少babel打包的文件体积
3、图片压缩
优化代码运行性能
code split 代码分割，实现按需加载
webpack5和webpack4区别（https://juejin.cn/post/6990869970385109005）
- Tree Shaking：自动剔除第三方包里面没有引入的方法
当我们引入第三方包的时候，如果只引入的一个方法，其他没有用到的方法是冗余放入，Tree Shaking就可以自动帮我们把那些没有用的东西提出掉，来减少bundle的体积 - webpack4需要安装插件 terser-webpack-plugin 才能实现js压缩，webpack5内置了插件不需要安装，而且设置mode=“production” 的时候会自动开启 js 压缩功能。
- webpack5 内部内置了 cache 缓存机制。直接配置即
// webpack.config.js
module.exports= {// 使用持久化缓存cache: {type: 'filesystem'，cacheDirectory: path.join(__dirname, 'node_modules/.cac/webpack')}
}
git
- 1、git pull和git fetch的区别
- git fetch只是将远程仓库的最新的版本下载到本地，但是不会自动merge,相当于工作区中的文件并没有更新
- git pull会从远程仓库获取到最新的版本并merge到本地。
- git pull origin dev=git fetch origin dev+git merge origin/dev;
- git fetch更保险一些，git pull操作更简单
- 2、git merge和git rebase的区别
- 共同点：将一个分支的更改并入另一个分支，只不过方式有些不同
- 不同点：
- merge如果master有新提交，合并之后有冲突，仅需修改之后重新提交，后会生一个新的commit，整个历史记录比较混乱
- rebase如果master有新提交，合并之后有冲突，不会产生额外的commit。这样的好处是，‘干净’；如果合并的分支中存在多个commit，需要重复处理多次冲突。