1、webpack
webpack打包工具（重点在于配置和使用，原理并不高优。只在开发环境应用，不在线上环境运行），压缩整合代码，让网页加载更快。
前端代码为什么要进行构建和打包？
体积更好（Tree-shaking、压缩、合并），加载更快
编译高级语法（scss、TS、ES6+、模块化）
兼容性和错误检查（Ployfill、postcss、eslint）
统一高效的开发环境，统一的构建流程和产出标准，集成公司构建规范（提测、上线）
基本配置、高级配置
1）基本配置
拆分配置和merge：common dev prod配置
启动本地服务 webpack-dev-server
处理ES6 babel-loader
处理样式 style-loader css-loader less-loader postcss-loader（loader执行顺序从后往前）
处理图片 file-loader url-loader
2）高级配置
多入口
抽离css
抽离公共代码
异步加载js（懒加载）
处理JSX babel-loader
处理Vue vue-loader
module chunk bundle分别是什么意思？区别？
module 各种源码文件，webpack中一切皆模块，被引入的都可以看作模块，js、css、img
chunk 多模块合成的（类似在内存中还没产出的代码块），entry splitChunk import()生成chunk
bundle 最终的输出文件
webpack性能优化
1）优化打包构建速度
（生产环境）
优化babel-loader：加cacheDirectory、加include或exclude
IgnorePlugin
noParse 引入的时候避免打包的东西
happyPack 多进程打包
ParallelUglifyPlugin 多进程压缩JS
（不能用于生产环境）
自动刷新 整个网页全部刷新，速度比较慢；整个网页全部刷新，状态全丢失
热更新 新代码生效，网页不刷新，状态不丢失
DllPlugin动态链接库插件，前端框架vue React，体积大构建慢。较稳定，不常升级版本。同一个版本只构建一次即可，不用每次都重新构建。
2）优化产出代码执行效率
小图片base64编码
bundle+hash
懒加载
提取公共代码
使用CDN加速 img、css、js推到CDN上
使用production 自动开启代码压缩；Vue和React等会自动删掉调试代码；启动Tree-Shaking
使用Scope Hosting 多个函数合并成一个函数。代码体积更小，创建函数作用域更少，代码可读性更好
构建流程概述（打包流程）
参考：webpack构建流程
loader和plugin区别？
loader模块转换器
plugin扩展插件
常见loader和plugin?
参考：loader和plugin
tree Shaking,什么时候失效
2、vite
极快的开发服务器启动（基于原生ESM的按需编译）
闪电般的HMR
开箱即用的现代化前端支持（ts、css）
生产构建使用rollup
预加载
为什么本地启动快
3、babel
babel从ES高级语法向低级语法转变