webpack理解
webpack是一个静态的打包工具，可以用来管理项目依赖，其中打包可以解决浏览器频繁请求的问题，loader作为翻译官可以提高开发效率（sass）、解决浏览器兼容问题（es6），plugin则扩展了webpack的功能
常见的loader
sass-loader：将scss/sass转换成css
image-loader：加载并且压缩图片文件
babel-loader：把es6转成es5
eslint-loader：通过eslint检查js代码
vue-loader：加载vue单文件组件
cache-loader：将结果缓存到磁盘里
常见的plugin
vuex-persistedstate：解决刷新浏览器vuex数据丢失问题
clean-webpack-plugin：每次打包自动删除原来打包生成的包文件夹
babel-plugin-transform-remove-console：生产环境去掉console
hot-module-replacement-plugin：模块热替换
loader和plugin的区别
loader是一个函数，对参数进行转换，返回转换后的结果，相当于翻译官
plugin是插件，用来扩展webpack的功能，webpack运行时会广播出很多事件，plugin监听这些事件并通过webpack提供的API改变输出结果
- loader不需要引入，plugin需要；前者在rules中配置，后者在plugins数组中配置
- loader在webpack读取模块内容，生成AST语法树之前进行；plugin在整个打包过程中进行
webpack运行流程
初始化流程：从配置文件和Shell语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数
编译构建流程：从Entry发出，针对每个Module串行调用对应的Loader去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理
输出流程：对编译后的Module组合成Chunk，把Chunk转换成文件，输出到文件系统
webpack proxy工作原理，为什么能解决跨域
原理实质上是利用http-proxy-middleware 这个http代理中间件，实现请求转发给其他服务器
webpack-dev-server是webpack官方的一个开发工具，会启动一个本地服务器（只适用在开发过程中），通过设置webpack proxy实现代理请求后，相当于浏览器与服务端中添加一个代理者
当本地发送请求的时候，代理服务器响应该请求，并将请求转发到目标服务器，目标服务器响应数据后再将数据返回给代理服务器，最终再由代理服务器将数据响应给本地
本地浏览器和代理服务器是同源的，服务器与服务器之间不存在跨域问题，所以能解决跨域
使用webpack来优化前端性能
js代码压缩
terser-webpack-plugin：让bundle更小
css代码压缩
css-minimizer-webpack-plugin：去除无用的空格
文件大小压缩
compression-webpack-plugin：压缩文件
图片压缩
使用image-webpack-loader来对不同图片进行压缩
tree shaking
消除死代码
js
设置usedExports为true，没被用上的代码在打包时会加入unused harmony export mul注释，用来告知 terser-webpack-plugin在优化时，可以删掉这段代码
css
使用purgecss-plugin-webpack删掉没用到的css样式
代码分离
默认情况下，所有的JavaScript代码（业务代码、第三方依赖、暂时没有用到的模块）在首页全部都加载，就会影响首页的加载速度
splitChunksPlugin代码分离可以分成更小的bundle，控制资源加载优先级，提高代码的加载性能
提高webpack构建速度
优化loader配置
匹配文件类型的时候，注意提升正则表达式的性能（如果项目源码只有js文件，正则就不要写的很复杂）
配置include/exclude，规定哪些目录下的文件使用loader处理
优化resolve.modules和alias
使用绝对路径和别名来减少查找过程
使用DLLPlugin插件
对于依赖的第三方库，比如vue，vuex等这些不会修改的依赖，可以和自己编写的代码分开打包，好处是每次更改我本地代码的文件时，只需要重新打包我项目本身的文件代码，而不会再去编译第三方库
以后只要我们不升级第三方包，那么webpack就不会对这些库再次打包，从而提高打包的速度
使用cache-loader
在一些性能开销较大的 loader之前添加 cache-loader，将结果缓存到磁盘里，提升二次构建速度
启动多线程
使用terser-plugin多进程并行运行提高构建速度
webpack和vite
- webpack先打包再启动开发服务器；vite是直接启动开发服务器，不需要分析模块的依赖、不需要编译，因此启动速度非常快
- 在热更新时，webpack会将改变的模块的所有依赖重新编译，而vite则是让浏览器去重新请求该模块即可
- vite使用的是ES Module，代码中不可以使用CommonJs
sourceMap是什么
是一项将打包压缩后的代码映射回源代码的技术，前者没有阅读性可言，开发中出现问题很难debug
sourceMap可以帮助快速定位到源代码的位置，提高开发效率