一、前言 Webpack 一直都是有些人的心魔，不清楚原理是什么，不知道怎么去配置，只会基本的 API 使用。它就像一个黑盒，让部分开发者对它望而生畏。 而本节最大的作用，就是帮大家一点一点的消灭心魔。 大家之所以认为 Webpack 复杂，很大程度上是因为它依附着一套庞大的生态系统。 其实 Webpack 的核心流程远没有我们想象中那么复杂 ，甚至只需百来行代码就能完整复刻出来。 因此在学习过程中，我们应 注重学习它本身的设计思想 ，不管是它的 Plugin 系统 还是 Loader 系统 ， 都是建立于这套核心思想之上 。所谓万变不离其宗，一通百通。 在本文中，我将会从 Webpack 的整体流程出发，通篇采用 结论先行、自顶向下 的方式进行讲解。在涉及到原理性的知识时，尽量采用图文的方式辅以理解， 注重实现思路 ， 注重设计思想 。 文中所涉及到的代码均放到个人 github 仓库中： https://github.com/noBaldAaa/hand-webpack 二、基本使用 初始化项目： ...

欢迎关注我的公众号[「小李的前端小屋」](https://link.juejin.cn/?target=https%3A%2F%2Fs4.ax1x.com%2F2022%2F02%2F28%2FbuleAA.png "https://link.juejin.cn/?target=https%3A%2F%2Fs4.ax1x.com%2F2022%2F02%2F28%2FbuleAA.png")～ package.json 是前端每个项目都有的 json 文件，位于项目的根目录。许多脚手架在搭建项目时也会自动帮我们自动初始化好 package.json。 package.json 里面有许许多多的配置，与项目息息相关，了解它们有助于了解项目，提效开发，规范代码。 今天主要介绍一些常见配置，我把它们分为了 7 大类： 描述配置 文件配置 脚本配置 依赖配置 发布配置 系统配置 第三方配置 描述配置 主要是项目的基本信息，包括名称，版本，描述，仓库，作者等，部分会展示在 npm 官网上。 ![image](https://stat

webpack 工作流程 本篇内容和配置基于 webpack v5.52.1 讲解 相关问题 webpack 工作流程是怎样的 webpack 在不同阶段做了什么事情 回答关键点 模块化 打包 依赖生成 工程化 webpack 是一种模块打包工具，可以将各类型的资源，例如图片、CSS、JS 等，转译组合为 JS 格式的 bundle 文件。 图片来源 [webpack 官网](https://webpack.js.org/) webpack 构建的核心任务是完成内容转化和资源合并。主要包含以下 3 个阶段： 1. 初始化阶段 初始化参数 ：从配置文件、配置对象和 Shell 参数中读取并与默认参数进行合并，组合成最终使用的参数。 创建编译对象 ：用上一步得到的参数...

一、背景 随着我们的项目涉及到页面越来越多，功能和业务代码也会随着越多，相应的 webpack 的构建时间也会越来越久 构建时间与我们日常开发效率密切相关，当我们本地开发启动 devServer 或者 build 的时候，如果时间过长，会大大降低我们的工作效率 所以，优化 webpack 构建速度是十分重要的环节 二、如何优化 常见的提升构建速度的手段有如下： 优化 loader 配置 合理使用 resolve.extensions 优化 resolve.modules 优化 resolve.alias 使用 DLLPlugin 插件 使用 cache-loader terser 启动多线程 合理使用 sourceMap 优化loader配置 在使用 loader 时，可以通过配置 include 、 exclude 、 test 属性来匹配文件，接触 include 、 exclude 规定哪些匹配应用 loader 如采用 ES6 的项目为例，在配置 babel-loader 时，可

前言 面试题只是一个引子，快速刷题就是背（面试官问你，但是他不一定很深入），想深入理解还是得花大量精力； webpack 的构建流程是什么 初始化参数 ：解析 webpack 配置参数，合并 shell 传入和 webpack.config.js 文件配置的参数,形成最后的配置结果； 开始编译 ：上一步得到的参数初始化 compiler 对象，注册所有配置的插件，插件 监听 webpack 构建生命周期的事件节点，做出相应的反应，执行对象的 run 方法开始执行编译； 确定入口 ：从配置的 entry 入口，开始解析文件构建 AST 语法树，找出依赖，递归下去； 编译模块 ：递归中根据文件类型和 loader 配置，调用所有配置的 loader 对文件进行转换，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理； 完成模块编译并输出 ：递归完事后，得到每个文件结果，包含每个模块以及他们之间的依赖关系，根据 entry 或分包配置生成代码块 chunk ; 输出完成

本篇内容和配置基于 webpack v5.52.1 讲解 相关问题 webpack 工作流程是怎样的 webpack 在不同阶段做了什么事情 回答关键点 模块化 打包 依赖生成 工程化 webpack 是一种模块打包工具，可以将各类型的资源，例如图片、CSS、JS 等，转译组合为 JS 格式的 bundle 文件。 图片来源 webpack 官网 webpack 构建的核心任务是完成内容转化和资源合并。主要包含以下 3 个阶段： 1. 初始化阶段 初始化参数：从配置文件、配置对象和 Shell 参数中读取并与默认参数进行合并，组合成最终使用的参数。 创建编译对象：用上一步得到的参数创建 Compiler 对象。 初始化编译环境：包括注入内置插件、注册各种模块工厂、初始化 RuleSet 集合、加载配置的插件等

优化方向 webpack-bundle-analyzer 文件大小分析 speed-measure-webpack-plugin 打包耗时分析 1. 使用高版本的 webpack 和 nodejs 2. 按需引入 3. 缩小查找范围（loader） xclude/include (确定 loader 规则范围) resolve.modules 指明第三方模块的绝对路径 (减少不必要的查找) resolve.mainFields 只采用 main 字段作为入口文件描述字段 (减少搜索步骤，需要考虑到所有运行时依赖的第三方模块的入口文件描述字段) resolve.extensions 尽可能减少后缀尝试的可能性 noParse 对完全不需要解析的库进行忽略 (不去解析但仍会打包到 bundle 中，注意被忽略掉的文件里不应该包含 import、require、define 等模块化语句) IgnorePlugin (完全排除模块) 合理使用alias 4. 缓存 5. 多进程/多

一、背景 Webpack 最初的目标是实现前端项目的模块化，旨在更高效地管理和维护项目中的每一个资源 模块化 最早的时候，我们会通过文件划分的形式实现模块化，也就是将每个功能及其相关状态数据各自单独放到不同的 JS 文件中 约定每个文件是一个独立的模块，然后再将这些 js 文件引入到页面，一个 script 标签对应一个模块，然后调用模块化的成员 html <script src="module-a.js" </script <script src="module-b.js" </script 但这种模块弊端十分的明显，模块都是在全局中工作，大量模块成员污染了环境，模块与模块之间并没有依赖关系、维护困难、没有私有空间等问题 项目一旦变大，上述问题会尤其明显 随后，就出现了命名空间方式，规定每个模块只暴露一个全局对象，然后模块的内容都挂载到这个对象中 js window.moduleA = { method1: function () { console.log('moduleA method1') } }

一、是什么 webpack proxy ，即 webpack 提供的代理服务 基本行为就是接收客户端发送的请求后转发给其他服务器 其目的是为了便于开发者在开发模式下解决跨域问题（浏览器安全策略限制） 想要实现代理首先需要一个中间服务器， webpack 中提供服务器的工具为 webpack-dev-server webpack-dev-server webpack-dev-server 是 webpack 官方推出的一款开发工具，将自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在了一起 目的是为了提高开发者日常的开发效率， 只适用在开发阶段 关于配置方面，在 webpack 配置对象属性中通过 devServer 属性提供，如下： js // ./webpack.config.js const path = require('path') module.exports = { // ... devServer: { contentBase: path.join(__dirname, 'dist'

一、背景 随着前端的项目逐渐扩大，必然会带来的一个问题就是性能 尤其在大型复杂的项目中，前端业务可能因为一个小小的数据依赖，导致整个页面卡顿甚至奔溃 一般项目在完成后，会通过 webpack 进行打包，利用 webpack 对前端项目性能优化是一个十分重要的环节 二、如何优化 通过 webpack 优化前端的手段有： JS代码压缩 CSS代码压缩 Html文件代码压缩 文件大小压缩 图片压缩 Tree Shaking 代码分离 内联 chunk 2.1 JS代码压缩 terser 是一个 JavaScript 的解释、绞肉机、压缩机的工具集，可以帮助我们压缩、丑化我们的代码，让 bundle 更小 在 production 模式下， webpack 默认就是使用 TerserPlugin 来处理我们的代码的。如果想要自定义配置它，配置方法如下： js const TerserPlugin = require('terser-webpack-plugin') module.exports = {

一、运行流程 webpack 的运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条 webpack 机制中，去改变 webpack 的运作，使得整个系统扩展性良好 从启动到结束会依次执行以下三大步骤： 初始化流程：从配置文件和 Shell 语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数 编译构建流程：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理 输出流程：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统 1.1 初始化流程 从配置文件和 Shell 语句中读取与合并参数，得出最终的参

一、模块化工具 模块化是一种处理复杂系统分解为更好的可管理模块的方式 可以用来分割，组织和打包应用。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体( bundle ) 在前端领域中，并非只有 webpack 这一款优秀的模块打包工具，还有其他类似的工具，例如 Rollup 、 Parcel 、 snowpack ，以及最近风头无两的 Vite 通过这些模块打包工具，能够提高我们的开发效率，减少开发成本 这里没有提及 gulp 、 grunt 是因为它们只是定义为构建工具，不能类比 1.1 Rollup Rollup 是一款 ES Modules 打包器，从作用上来看， Rollup 与 Webpack 非常类似。不过相比于 Webpack ， Rollup 要小巧的多 现在很多我们熟知的库都都使用它进行打包，比如： Vue 、 React 和 three.js 等 举个例子： js // ./src/messages.js export default { hi: 'Hey Guys, I am zc

一、是什么 Plugin （Plug-in）是一种计算机应用程序，它和主应用程序互相交互，以提供特定的功能 是一种遵循一定规范的应用程序接口编写出来的程序，只能运行在程序规定的系统下，因为其需要调用原纯净系统提供的函数库或者数据 webpack 中的 plugin 也是如此， plugin 赋予其各种灵活的功能，例如打包优化、资源管理、环境变量注入等，它们会运行在 webpack 的不同阶段（钩子 / 生命周期），贯穿了 webpack 整个编译周期 目的在于解决 loader 无法实现的其他事 配置方式 这里讲述文件的配置方式，一般情况，通过配置文件导出对象中 plugins 属性传入 new 实例对象。如下所示： js const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过

一、区别 前面两节我们有提到 Loader 与 Plugin 对应的概念，先来回顾下 loader 是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中 plugin 赋予了 webpack 各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是解决 loader 无法实现的其他事 从整个运行时机上来看，如下图所示： 可以看到，两者在运行时机上的区别： loader 运行在打包文件之前 plugins 在整个编译周期都起作用 在 Webpack 运行的生命周期中会广播出许多事件， Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果 对于 loader ，实质是一个转换器，将A文件进行编译形成B文件，操作的是文件，比如将 A.scss

一、是什么 loader 用于对模块的"源代码"进行转换，在 import 或"加载"模块时预处理文件 webpack 做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。如下图所示： 在 webpack 内部中，任何文件都是模块，不仅仅只是 js 文件 默认情况下，在遇到 import 或者 require 加载模块的时候， webpack 只支持对 js 和 json 文件打包 像 css 、 sass 、 png 等这些类型的文件的时候， webpack 则无能为力，这时候就需要配置对应的 loader 进行文件内容的解析 在加载模块的时候，执行顺序如下： ![78eeabad156e4dd0837dc36ef568da04](https://static.developers.pub/78eeabad156...