Webpack 知识体系｜ 青训营笔记

Webpack 的本质:Webpack的本质是一种前端资源编译、打包工具，用于自动化地管理资源依赖。在旧时代，手动管理资源依赖是一项非常繁琐的工作，极大地影响了开发效率。而Webpack可以通过配置文件来自动化地完成资源编译、打包、压缩等一系列操作，使得开发过程更加高效便捷。

核心流程 : Webpack的核心流程包括入口处理、依赖解析、资源解析和资源合并打包。入口处理指定了Webpack打包的入口文件，依赖解析是Webpack分析入口文件及其依赖的过程，资源解析将不同类型的资源文件转化为Webpack能够处理的模块，资源合并打包是将多个模块合并成一个或多个文件的过程。Webpack的配置可分为流程类和工具类，流程类配置影响打包流程中的某些环节，直接影响打包效果，而工具类配置提供更多工程化能力。

接入 Bable : Babel是一个JavaScript编译器，它可以将最新版本的JavaScript代码转换为向后兼容的代码，以便在旧版浏览器中运行。Babel的主要功能是将ES6+语法转换为ES5语法，支持React、TypeScript等语言的转换。Webpack和Babel分别解决的问题不同，Webpack解决的是前端资源打包和管理的问题，而Babel解决的是JavaScript语法转换的问题。Webpack和Babel可以协作到一起，是因为Babel可以被Webpack加载为一个插件，通过Babel-loader将代码转换后再由Webpack进行打包。

生成 HTML:优点是可以自动生成HTML页面，避免手动维护HTML页面时出现的重复、出错等问题，同时可以自动生成包含打包后的JavaScript和CSS文件的script和link标签。缺点是，自动生成的HTML页面可能不够灵活，需要开发者进行额外的配置，例如指定模板文件等。

使用 Webpack - 工具线:工具链指的是一系列在Web前端开发中使用的工具的集合。使用Webpack搭建工具链可以将一些常用的工具集成在一起，比如Babel、ESLint、Stylelint等，提高开发效率和代码质量。

Webpack 内容识别:Webpack在处理非标准JS资源时，通过使用Loader模块将这些资源转化为标准的JS模块，以便Webpack能够处理和打包这些资源。Loader模块是一些JavaScript函数，可以通过Webpack的配置文件中指定，并按照顺序进行链式调用，对资源进行处理。

认识 Loader ：Loader模块支持链式执行，即多个Loader模块按照顺序依次执行，并将处理结果传递给下一个Loader模块。Loader模块也支持异步执行，可以通过回调函数、Promise等方式异步加载资源并进行处理。Loader模块有两种执行模式：normal和pitch，normal是标准的执行模式，而pitch是在normal执行前先执行的特殊模式，通常用于一些特殊的需求，例如快速跳过某些Loader模块。

插件定义解析:插件架构被设计用于在一个工具的基础上，提供额外的功能或者定制化的特殊需求。这样的设计可以提高工具的灵活性

插件设计优势:插件设计的主要优势是提供了可扩展性和定制化。通过提供插件，可以扩展工具的功能，使其适用于更多的场景。同时，插件可以提供更多的自定义选项，满足不同用户的不同需求。这种扩展性和定制化使得工具更加灵活和实用。