游泳健身了解一下：
github和小伙伴一起搞的日常总结
前端为什么要用打包和构建
代码
压缩合并代码，（体积减小）提高运行速度
eslint代码，es6模块化 合理规范
ts高语言支持，less
兼容性postcss
流程
统一高效的开发环境
统一的流程和产出标准和规范
loader 和 plugin的区别
loader：用来文件解析的
plugin：比如htmlwebpackPlugin是webpack的一个插件
常见的loader
vue-loader // 解析vue文件
babel-loader // js新语法解析
css-loader // css文件解析
style-loader // 创建style放到head里面
url-loader // 图片转化base64 （小的图片可以进行准换来减少请求），可以图片大小限制，小的转换
file-loader // 用来生成图片文件名md5，返回图片的url
less-loader // 解析less文件
常见的plugin
htmlwebpackPlugin // 用来简化html创建流程，比如index.html 自动引入生成的css和js
dllPlugin // 拆分webpack构建，比如，vue2.x文件会几年都不用更新，那么我们就可以先生成好这个文件，以后打包直接引入即可
definePlugin //（创建时）设置全局的变量
ignorePlugin //忽略第三方文件不要被打包进去
happypack // 多线程打包
uglifyJSPlugin // 压缩文件
extractTextPlugin // css引入
webpack如何构建多页面
entry: 定义多个入口（字符串转变为数组），或者转化化object 键值对的方式
htmlwebpackplugin 也要构建多个实例，每个实例对应当前的入口
module chunk bundle 的理解
module：webpack的模块，一切都是模块
chunk：分割，import，splitChunk，entry
bundle：输出最后的文件
代码分割的本质和意义
文件的合理大小，文件太大导致当前加载缓慢，文件太小导致http的多次请求。需要一个合适的中间状态
webpack如何抽离公共代码
optimization下splitChunks来分割我们的代码块
模块打包原理？
import require es6 和 common.js webpack 都是可以识别的。webpack 只是提供来一个打包的入口和出口
webpack 懒加载
import() 方法来进行懒加载
common和es6的区别
common: 值的拷贝，运行时
es6：值的引用，编译时
babel和webpack的区别
babel：对js es5以上语法对解析（只对语法）
webpack：是一个构建工具，集合loader，和plugin对集合
sourceMap
压缩后的代码没有可读性，所以我们调试代码需要source map反编译
wenapck性能提升（代码）
1.代码体积减小
2.内存占用小
3.合理分包不进行重复加载
1.小图片进行base64编译 // url-loader limit 限制大小
2.contenthash 修改文件时编译（提升打包速度）（线上发布）
3.懒加载（import()）
4.ignorePlugin // 忽略不需要的打包文件
5.提取公共代码 // splitChunks
6.使用cdn加速
7.模式切换production（开启代码压缩）
8.tree-shaking // 不打包没有引用的方法 比如一个，js 只用了A方法 B方法并没有使用则不会打包B方法的代码（只支持es6）
9.scope Hosting //代码体积减少，创建作用域减少少，代码可读性增加，(modelConcatenationPlugin)
weboack构建速度提升
1.优化babel-loader
use:['babel-loader?cacheDireactory'] // 开启缓存
incloude // 只添加xxx
excloude // 非xxxx
2.ignorePlugin // 忽略第三方目录
3.noparse //module 下面的一个属性，可以精准过滤当前文件
4.happypack //多进程打包
5.ParallelUglifyPlugin // 多进程压缩
webpack的构建流程
1.初始化参数：从配置文件和Shell获取参数，合并
2.开始编译：上一步得到的参数化对象Compiler，加载所有配置的插件，执行对象开始run 方法
3.确认入口：根据entry找出所有的入口
4.模块编译：对所有的loader进行编译，找出依赖
5.完成模块编译：得到所有内容和依赖关系
6.输出资源：更加入口和模块之间的关系进行组装成一个个Chunk，把每个chunk转化问文件输出到列表
7.输出完成：确认当前的文件内容，根据配置和路径添加文件名，把文件内容写到系统中
webpack 热更新原理
本地有一个websocket，和浏览器进行通信，Ajax传递的数据和本地进行对比（diff算法）对比出需要的只然后进行加载
（HotModulePlugin ）
babel的原理
本地代码解析为AST树，然后对AST进行变换操作产生新对AST树，然后对新的AST进行编码（产生代码）
总结
webpack还是很重要的是向下升级必须要掌握的，下期会带来vue源码个人的见解
最后
多多点赞在github 上面对❤️是对我最好对鼓励，我会尽量分享一些自己使用得心得以及正确对食用方式 求靠谱内推（北京地区）可以留言我 +。=
