Webpack 的 resolve 配置里有一个容易被忽略的选项 cacheWithContext，它控制着模块解析缓存是否包含请求的上下文路径。默认情况下该值为 true，意味着解析缓存会连同 issuer 所在的目录一起作为缓存键的一部分。这个设计主要为了应对不同目录下同名模块解析结果可能不同的...

栏目：Webpack 时间：09-18 Webpack resolve.cacheWithContext 模块解析缓存

Webpack 5 在处理 Node.js 目标环境的构建时，默认不会解析代码里的 new Worker() 调用，因为 Worker 在浏览器中代表 Web Worker，而 Node.js 需要通过 worker_threads 模块创建线程。experiments.workerThreads 这个实验特性正是为了填补这一差异：开启后，Webpack 会把 new Work...

栏目：Webpack 时间：09-18 Webpack experiments.workerThreads Worker线程

一个自定义 loader 明明在 package.json 里声明了 main 字段，Webpack 构建时却提示找不到入口，这种情况通常是 resolveLoader.mainFields 的字段优先级与预期不一致。该配置专门控制 Webpack 解析 loader 包时读取 package.json 的哪些入口字段，默认顺序是先找 loader 字段...

栏目：Webpack 时间：09-18 Webpack resolveLoader.mainFields loader入口字段

假设你在一个中型项目里每次保存代码都要等十几秒才能看到热更新结果，这种体验会严重拖慢开发节奏。Webpack 开发服务器的性能瓶颈往往不在模块打包本身，而在于一些默认或误用的配置项，其中 sourcemap 生成和代码压缩是两个最容易被忽视的开销。sourcemap 虽然在调试时很有...

栏目：Webpack 时间：09-18 Webpack sourcemap 开发环境性能优化

Webpack 打包完成后，终端输出的信息里其实藏着不少有价值的细节，stats.outputPath 就是其中一个容易被忽视的字段。它会告诉你本次构建产物最终落到了哪个目录，配合 output.path 配置一起理解，能帮你快速排查文件输出位置不对、路径拼接错误等问题。本文围绕 stats 对象的结...

栏目：Webpack 时间：09-16 Webpack stats outputPath

Webpack 打包产物里那层括号加叹号的写法到底是什么，output.iife 配置在其中扮演什么角色，是控制整个 bundle 的包裹，还是控制单个模块的包裹，这是不少开发者容易混淆的地方。本文从 IIFE 的基本概念讲起，结合 Webpack 4 到 Webpack 5 的演进过程，分析 output.iife 配置项的真...

栏目：Webpack 时间：09-16 Webpack output.iife 立即执行函数

devServer.onAfterSetupMiddleware 是 Webpack 开发服务器提供的一个钩子，它会在内部中间件安装完成之后被调用，常用来挂载自定义的 mock 接口、登录鉴权或者代理逻辑。不少人在从 webpack-dev-server 3.x 升级到 4.x 后发现配置失效，原因就是这个钩子在版本迭代中经历了更...

栏目：Webpack 时间：09-15 Webpack devServer onAfterSetupMiddleware

Webpack 从 5.x 开始提供了一个实验性配置 experiments.buildHttp，它允许构建时直接通过 HTTP 或 HTTPS 协议拉取远程资源，并把下载结果缓存到本地，无需手动下载依赖包再放进项目。开启后，代码里可以直接 import 一个网络地址，Webpack 会在构建阶段请求该 URL，将响应内容作为模...

栏目：Webpack 时间：09-15 Webpack buildHttp 远程资源打包

构建速度慢往往不是一下子就能定位的问题，Webpack 提供的 stats.performance 配置可以在输出信息中直接展示各个模块的体积提示，帮你快速发现哪些资源超过了预设阈值。本文围绕这一配置项展开，先解释 performance 选项与 stats 之间的关系，说明 hints、maxAssetSize、maxEntr...

栏目：Webpack 时间：09-14 Webpack stats.performance 构建性能优化

大型项目冷构建耗时过长常常拖慢迭代节奏，这背后是打包工具反复进行模块解析与依赖图计算。Webpack的流程创新从底层重新设计了缓存与编译管道，通过文件系统持久化缓存将二次构建时间压缩到秒级。该项特性并非简单内存缓存，而是将模块编译结果序列化到磁盘，配合内容哈希实现...

栏目：Webpack 时间：09-14 Webpack Process Innovation 构建缓存

Webpack 模块标识符的生成逻辑直接决定了浏览器长期缓存的有效性。HashedModuleIdsPlugin 早期通过哈希模块路径生成短数字 ID，减少明文暴露的同时试图保持构建间稳定，但其算法依赖模块遍历顺序，一旦依赖图变动便可能引发 ID 重排。Deterministic module IDs 则是后来提出的...

栏目：Webpack 时间：09-14 HashedModuleIdsPlugin deterministic module IDs Webpack

Webpack 配置 loader 时，许多人默认只有 options 能向 loader 传参，这其实忽略了 with 选项的上下文注入能力。with 选项可将模块路径、依赖关系等动态信息直接映射到 loader 的执行上下文，让 loader 获得比静态配置更灵活的环境感知。在具体使用中，with 支持常量和函数两种...

栏目：Webpack 时间：09-14 Webpack loader with 上下文

Webpack 在解析模块路径时，需要先找到包的描述文件来判断入口、依赖和版本信息，默认使用的描述文件就是 package.json。resolve.descriptionFiles 这个配置项决定了 Webpack 去查找哪些文件作为描述文件。本文详细介绍描述文件在模块解析中的作用原理，包括描述文件如何影响...

栏目：Webpack 时间：09-14 Webpack descriptionFiles package.json

打包文件名里那些 0.main.js、123.chunk.js 究竟是怎么来的？这背后由 Webpack 的 optimization.chunkIds 配置决定。本文系统讲解 natural、named、deterministic、size 这几种 Chunk ID 生成策略的工作原理与区别，分析不同策略对生产构建产物稳定性、缓存命中率和文件体积...

栏目：Webpack 时间：09-14 Webpack optimization.chunkIds Chunk ID

有没有遇到过这种情况：本地开发时 TypeScript 明明有类型错误，页面却照常跑起来了，等到上线前跑 tsc --noEmit 或者 CI 阶段才集中爆出一堆错误。这其实是 Webpack 处理 TypeScript 的方式决定的。ts-loader 默认走 transpileOnly 模式时只转译不检查类型，fork-ts-checker-we...

栏目：Webpack 时间：09-13 Webpack TypeScript ts-loader

开发 npm 库时，如果将 React、lodash 这类依赖直接打进产物，必然导致包体臃肿，甚至出现多个副本引发混乱。externals 和 peerDependencies 正是解决这类问题的关键配置。externals 帮助 Webpack 在打包时忽略指定的模块，让它们由宿主环境提供；peerDependencies 则向 npm 声明...

栏目：Webpack 时间：08-28 Webpack externals peerDependencies

将样式代码直接注入 style 标签虽然方便调试，却会拖慢首屏渲染，还会放弃浏览器缓存带来的性能红利。MiniCssExtractPlugin 能把所有 CSS 从 JavaScript 打包结果中剥离，输出为独立 .css 文件，让样式与脚本并行加载，借助 contenthash 实现长期缓存，显著降低二次访问成本。本文从...

栏目：Webpack 时间：08-27 MiniCssExtractPlugin Webpack CSS提取

直接将SVG文件作为img标签的src属性引入是前端开发中常见的做法，但这种方案在需要动态控制图标颜色、大小以及应对大量图标场景时，会导致严重的网络请求开销和维护成本。为了解决这个问题，采用雪碧图技术将多个SVG合并为一个文件并通过use元素引用成为了更优的选择。本文将...

栏目：Webpack 时间：08-26 Webpack svg-sprite-loader Vue组件

项目打包时突然报错提示无法解析woff2或ttf格式的字体文件，控制台满是Module parse failed的红色警告，这往往是Webpack默认配置不支持二进制资源加载导致的。前端工程化中引入自定义字体是高频需求，但Webpack本身只能理解JavaScript和JSON，对于字体这类静态资源必须借助特定...

栏目：Webpack 时间：08-26 Webpack 字体文件 woff2

构建工具链里常遇到需要把组件样式直接烘焙为图片的需求，例如生成社交分享图或邮件模板。Webpack默认只处理文本与文件依赖，并不具备把CSS布局渲染成位图的能力。借助Node.js的canvas与jsdom，我们可以在loader里解析样式规则，用无头方式度量盒模型并绘制到画布，最后导出为PNG...

栏目：Node.js 时间：08-24 node.js Webpack css2image

当主线程与Web Worker协同工作时，你是否遇到过Worker内部加载的脚本或静态资源路径解析错误的问题？在复杂的构建环境中，主入口的公共路径往往无法直接满足Worker上下文的需求，导致动态加载的chunk或资源出现404找不到的情况。Webpack提供了output.workerPublicPath配置项专门...

栏目：Webpack 时间：08-24 Webpack workerPublicPath Web Worker

你是否还在每个使用jQuery的文件里手动写入 import $ from jquery 这样的导入语句？当项目里大量模块依赖同一个库时，重复导入不仅繁琐，还容易遗漏。webpack 提供的 ProvidePlugin 插件可以自动加载模块，它在打包过程中检测到代码里的自由变量如 $ 或 jQuery 时，会自动注入对应...

栏目：Webpack 时间：08-24 ProvidePlugin Webpack 自动加载模块

Webpack 的构建流程本质上是一个基于事件驱动的插件系统，而配置文件中的 experiments 对象则是连接稳定内核与前沿特性的桥梁。默认情况下，Webpack 仅暴露经过长期验证的稳定功能，以确保大多数项目的构建过程绝对安全。然而，为了提前适配未来的前端标准并获取极致的构建性能，...

栏目：Webpack 时间：08-23 Webpack experiments 实验性功能

编译一个大型前端项目时，常常弄不清某个文件到底向外暴露了哪些变量，靠人工翻代码既慢又容易漏。Webpack在构建时其实已经静态分析过每个模块的语法树，并把结果写进了stats数据里，其中providedExports字段就专门记录模块实际提供的导出名称。开启该选项后，构建产物统计信息会...

栏目：Webpack 时间：08-22 Webpack stats.providedExports 模块导出分析

直接扫描源码字符串来删除没用到的样式，听起来能让打包体积骤减，但 PurgeCSS 在 Webpack 里常误伤动态拼接的类名。比如用 JS 模板字符串组合 btn-${type} 生成的样式会被当成死代码清掉。另一个隐蔽问题是第三方组件库的样式依赖运行时类名，构建期无法被静态分析捕获。若 c...

栏目：Webpack 时间：08-22 Webpack PurgeCSS 未使用CSS