Webpack:
Webpack是一个现代的前端构建工具，用于将前端项目中的各种资源（如JavaScript、CSS、图片等）打包成优化过的静态文件，以便在浏览器中加载和运行。它的主要作用是帮助开发者在开发过程中更高效地管理、组织和优化项目的前端代码。
主要流程：
1.入口处理（读入）->从’entry’文件开始，启动编译流程
2.依赖解析（依赖）->从’entry’文件开始，根据’require’或’import’等语句找到依赖资源
3.资源解析（数据）->根据’module’配置，调用资源转移器，将png、css非标准JS资源转译为JS内容
4.资源合并打包（输出）->将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
’entry’+’output’为一个Webpack的基本结构，一个项目中至少要这两个流程
模块化+一致性：降低代码复杂度、提升查询及运行效率
1.多个文件资源合并，减少http请求数
2.支持模块化开发
3.支持高级JS特性
4.支持TypeScript、CoffeeScript方言
5.统一资源处理模型：CSS、图片、font
WebPack主要按照“配置”以使用：配置可分为
-流程类:上述主要流程中的环节，影响打包最终效果
-工具类:主流程之外其余功能的配置项e.g.开发效率类、性能优化类、日志类
Module(数据):
rules:处理的规则
test:过滤条件
use:选择处理数据的loader
Webpack中的Loader是用于在构建过程中处理各种文件的插件，它们的主要作用是将不同类型的文件转换成Webpack可以识别的模块，从而让这些文件可以成为构建过程的一部分。Loader可以执行各种任务，如文件转换、代码转译、资源处理等，以满足项目的需求和优化。
Loader的作用包括：
文件转换： Loader能够将不同类型的文件（如CSS、SCSS、Less、图片、字体等）转换成JavaScript模块，以便在应用程序中使用。
代码转译： 一些Loader，如Babel Loader，用于将新版本的JavaScript代码转换为浏览器可识别的旧版本代码，以保证在不同浏览器上的兼容性。
资源处理： Loader可以处理项目中的各种资源，例如图片、字体等。通过Loader，可以对这些资源进行优化、压缩，或者根据需要生成基于文件内容的文件名（用于缓存等目的）。
样式处理： CSS Loader、Sass Loader、Less Loader等用于处理样式文件，将其转换成浏览器可理解的形式，同时可以通过Style Loader将样式插入到页面中。
代码分割和按需加载： 通过特定的Loader和配置，可以实现将代码分割成多个块，并实现按需加载，从而提高页面的性能和加载速度。
配置和定制： Loader可以根据项目的需求进行定制和配置，从而满足不同的构建要求。
流程类：
e.g.处理CSS的过程
处理JS的过程：接入Babel
Babel：
Babel是一个JavaScript编译器，主要用于将新版本的JavaScript代码（如ES6、ES7等）转换成旧版本的JavaScript代码（通常是ES5），以确保在不支持新特性的浏览器中也能够正常运行。Babel解决了以下问题：
ES版本兼容性： Babel允许开发者使用最新的JavaScript语法和特性，而不用担心在旧版浏览器中出现兼容性问题。
编译新特性： Babel可以将ES6+的新特性，如箭头函数、模块化等，转换成ES5代码，以便在更旧的浏览器中使用。
语法糖支持： Babel还支持一些JavaScript的语法糖，如JSX（用于React）和TypeScript等的转换。
处理HTML的过程：需要安装插件HtmlWebPackPlugin，自动生成HTML内容
HtmlWebpackPlugin可以极大地提升项目的开发效率和代码质量，尤其在复杂的项目中。然而，在简单的项目中，使用HtmlWebpackPlugin可能会显得过于繁琐，此时手动维护HTML也是一个可行的选择。
工具类：
HMR(模块热替换)：写完module保存之后，网站上立刻更新效果
Tree-Shaking（树摇）：删除无用/冗余代码，可以防止导入其他工具类中用不到的功能，增加运行效率
