小码哥深入Webpack5等构建工具(gulp/rollup/vite)

2. loader 和 plugin 不同
   2.1. loader是使wenbpack拥有加载和解析非js文件的能力
   2.2. plugin 可以扩展webpack的功能，使得webpack更加灵活。可以在构建的过程中通过webpack的api改变输出的结果

3. webpack构建流程
   3.1. 初始化参数，从配置文件和shell语句中读到的参数合并，得到最后的参数
   3.2. 开始编译：用合并得到的参数初始化complier对象，加载是所有配置的插件，执行run方法开始编译
   3.3. 确定入口，通过entry找到入口文件
   3.4. 编译模块，从入口文件出发，调用所有配置的loader对模块进行解析翻译，在找到该模块依赖的模块进行处理
   3.5. 完成模块编译，得到每个模块被翻译之后的最终的内容和依赖关系
   3.6. 输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，在把每个chunk转换成一个单独的文件加载到输出列表
   3.7. 输出完成，确定输出的路径和文件名，把内容写到文件系统中
   在以上过程中，webpack会在特定的时间点广播出特定的事件，插件在舰艇感兴趣的事件后会执行特定的逻辑，改变webpack的运行结果

4. webpack 热加载执行原理
   ？？？？

5. 如何利用webpack来优化前端性能
   5.1. 压缩代码。uglifyJsPlugin 压缩js代码， mini-css-extract-plugin 压缩css代码
   5.2. 利用CDN加速，将引用的静态资源修改为CDN上对应的路径，可以利用webpack对于output参数和loader的publicpath参数来修改资源路径
   5.3. 删除死代码（tree shaking），css需要使用Purify-CSS
   5.4. 提取公共代码。webpack4移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替

6. 什么是bundle,什么是chunk，什么是module?
   bundle:有webpack打包出来的文件
   chunk：webpack在进行模块的依赖分析的时候，代码分割出来的代码块
   module:开发中的单个模块