第7期 - 阳澄湖吃蟹

封面图来源于昆山阳澄湖莲花岛，在岛上选了一家很有江南韵味的店吃了🦀️，味道很不错。

湖面的倒影

技术分享-webpack相关

模块化

模块化的目标是将复杂的前端应用程序拆分为模块，每个模块负责特定的功能。这些模块可以独立开发、测试和维护。模块化解决作用域问题

为什么需要 webpack

可以打包你的 JavaScript 应用程序（支持 ESM 和 CommonJS），支持不同的静态资源打包。 1.在浏览器运行 JavaScript：引用脚本来存放每个功能；但加载太多脚本会导致网络加载过慢的问题；或是使用一个包含所有项目代码的 .js 文件，但会导致作用域问题、文件大小、可读性和可维护性方面的问题 2.模块化：CommonJS 允许你在当前文件中加载和使用某个模块。导入需要的每个模块。实现了模块化的功能，但是不被浏览器认可的，因此需要需要通过工具 Webpack 打包，将其转换为浏览器可执行的代码。 3. IIFE 立即调用函数表达式：IIFE 产出任务执行器，当脚本文件被封装在 IIFE 内部时，可以安全地拼接或安全地组合所有文件，而不必担心作用域冲突

webpack 流程

通过初始化、编译和输出三个关键阶段，将源代码和资源文件转换为可在浏览器中运行的静态文件。

每个模块文件通过相互引用，形成一个图结构，在打包过程中模块会被合并成 chunk, chunk 合并成 chunk 组，并形成一个通过模块互相连接的图。

每个 chunk 都有对应的资源输出文件（即打包结果）。输出两种形式chunk Output: /dist/main.js - 一个 initial chunk 初始化类 /dist/394.js - non-initial chunk 动态模块加载类

根据Chunk 得到最终打包文件下的最终构建产物

初始化

启动构建：Webpack开始构建过程。读取与合并配置参数：Webpack读取配置文件（通常是webpack.config.js）中的配置选项，并将它们合并到Webpack的配置中。加载Plugin：Webpack加载并初始化各种插件，这些插件在编译过程中会执行特定的任务。实例化Compiler：Webpack创建一个Compiler对象，它是编译过程的引擎，负责控制和驱动整个过程。

编译

从Entry发出：Webpack从配置中指定的入口文件开始，这是构建依赖图的起点。针对每个Module串行调用对应的Loader：Webpack根据模块的类型，例如JavaScript、CSS等，依次调用相应的Loader对模块进行加载和转换。Loader将模块转换为Webpack可处理的格式。找到该Module依赖的Module，递归地进行编译处理：Webpack在处理模块时，会分析模块的依赖关系，找到模块所依赖的其他模块，并递归地对它们进行编译处理。这个过程构建了整个依赖图。

输出

对编译后的Module组合成Chunk：Webpack将编译后的模块组合成一个或多个代码块（Chunk）。这些代码块通常代表不同的入口文件或按需加载的模块。把Chunk转换成文件：Webpack将每个代码块转换成一个或多个输出文件，通常包括JavaScript文件、CSS文件以及其他资源文件。输出到文件系统：生成的文件被保存到指定的输出目录中，通常是一个名为 “dist” 的目录。这些文件可以用于部署到生产环境或用于开发和测试。

常见的 loader

babel-loader

通过 .babelrc 配置文件来指定转换规则和babel插件

用于将ES6+代码转译成ES5，以确保在各种浏览器中兼容性。
处理 JSX 语法，在 react 中使用

bebel将ES6转换为ES5

Babel 首先会将输入的 ES6 代码分解为一系列标记（tokens），这些标记是代码的基本词汇单元，包括关键字、标识符、操作符等。使用词法分析产生的标记构建语法树（AST）在 AST 构建完成后，Babel 可以通过一系列插件和转换器来遍历和修改 AST，将 ES6 代码转换为 ES5 代码。包括将 ES6 模块转换为 CommonJS、将箭头函数转换为传统函数等。最后，根据修改后的 AST 生成目标代码

为🐎需要将 ES6 模块转换为 CommonJS？ *服务器环境通常更支持 CommonJS，确保在服务器上运行时没有问题。 *确保与使用CommonJS的库的兼容性

css-loader style-loader

用于处理CSS文件，包括导入CSS文件和处理CSS模块。

vue-loader

用于解析.vue文件，提取其中的模板、样式和脚本

file-loader和url-loader

用于处理文件资源，例如图片、字体等，会为每个文件生成一个URL。这个URL是文件在输出目录中的相对或绝对路径，通常是相对于应用程序的根目录或构建输出目录的路径。

sass-loader和less-loader

用于处理Sass和Less等CSS预处理器。

常见的 plugin

html-webpack-plugin：用于生成 HTML 文件，并将生成的 JavaScript 文件自动插入到 HTML 中;
clean-webpack-plugin：用于在每次构建之前清理输出目录，以确保输出的文件是最新的;
eslint-webpack-plugin：用于在构建过程中运行 ESLint 检查
LimitChunkCountPlugin：用于限制和控制输出的代码块数量
DefinePlugin：在编译过程中创建全局常量，主要作用是为代码中的条件编译提供静态变量。如区分开发环境和生产环境

vue cli 内置了哪些loader和plugin

Webpack Loader： vue-loader：用于处理和解析.vue文件。 babel-loader：用于将ES6+代码转译成ES5。 css-loader：用于处理CSS文件。 url-loader：用于处理文件资源。

Webpack Plugin： HtmlWebpackPlugin：用于生成HTML文件，并将打包后的资源自动注入到HTML中。 VueLoaderPlugin：与vue-loader一起使用，用于解析.vue文件。 DefinePlugin：用于定义全局常量。