Webpack基础概念

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

webpack是什么？有什么做用？

Webpack 是当下最热门的前端资源模块化管理和打包工具。

它能够将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还能够将按需加载的模块进行代码分隔，等到实际须要的时候再异步加载。经过 loader 的转换，任何形式的资源均可以视做模块，好比 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

Webpack 是一个静态模块打包器。webpack在打包的时候，他会从入口开始，根据模块的依赖关系进行静态分析，递归地构建一个依赖图，其中包含应用程序对应的一个或多个模块，而后将它们打包成一个或多个 bundle.js

做用：

• 1.将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源
• 2.将按需加载的模块进行代码分隔，等到实际须要的时候再异步加载
• 3.经过 loader 的转换，任何形式的资源均可以视做模块

1. webpack的核心概念

entry (入口)

入口(Entry)指示 webpack 以哪一个文件为入口起点开始打包，分析构建内部依赖图。

output (出口)

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

loader

Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解 JavaScript)。

plugins (插件)

插件(Plugins)能够用于执行范围更广的任务。插件的范围包括，从打包优化和压缩， 一直到从新定义环境中的变量等。

mode (模式)

模式(Mode)指示 webpack 使用相应模式的配置。

选项	描述	特色
development	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置 为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。	能让代码本地调试 运行的环境
production	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置 为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。	能让代码优化上线 运行的环境

依赖图(dependency graph)是什么？

从 入口开始，webpack 会递归的构建一个 *依赖关系图*，这个依赖图包含着应用程序中所需的每一个模块，而后将全部模块打包为少许的 bundle。

2. webapck执行流程

Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行如下流程：

• 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
• 开始编译：用上一步获得的参数初始化 Compiler 对象，加载全部配置的插件，执行对象的 run 方法开始执行编译
• 肯定入口：根据配置中的 entry 找出全部的入口文件
• 编译模块：从入口文件出发，调用全部配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到全部入口依赖的文件都通过了本步骤的处理
• 完成模块编译：在通过第4步使用 Loader 翻译完全部模块后，获得了每一个模块被翻译后的最终内容以及它们之间的依赖关系
• 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每一个 Chunk 转换成一个单独的文件加入到输出列表，这步是能够修改输出内容的最后机会
• 输出完成：在肯定好输出内容后，根据配置肯定输出的路径和文件名，把文件内容写入到文件系统

在以上过程当中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，而且插件能够调用 Webpack 提供的 API 改变 Webpack 的运行结果。

简单说

• 初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler
• 编译：从 Entry 出发，针对每一个 Module 串行调用对应的 Loader 去翻译文件的内容，再找到该 Module 依赖的 Module，递归地进行编译处理
• 输出：将编译后的 Module 组合成 Chunk，将 Chunk 转换成文件，输出到文件系统中

3. Loader和Plugin的区别

Loader 本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。 由于 Webpack 只认识 JavaScript，因此 Loader 就成了翻译官，对其余类型的资源进行转译的预处理工做。

Plugin 就是插件，基于事件流框架 Tapable，插件能够扩展 Webpack 的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 能够监听这些事件，在合适的时机经过 Webpack 提供的 API 改变输出结果。

Loader 在 module.rules 中配置，做为模块的解析规则，类型为数组。每一项都是一个 Object，内部包含了 test(类型文件)、loader、options (参数)等属性。

Plugin 在 plugins 中单独配置，类型为数组，每一项是一个 Plugin 的实例，参数都经过构造函数传入。

参考

juejin.cn/post/684490… juejin.cn/post/684490…