当主线程与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

Webpack 的 optimization.mergeDuplicateChunks 选项虽然默认开启，但它的内部行为并不像名字那样直观。该配置的核心作用是在 chunk 生成之后、输出之前，检查所有 chunk 之间的模块依赖关系，把被多个 chunk 同时包含的相同模块提取到一个可共享的 chunk 中，从而消除重复代码...

栏目：Webpack 时间：08-20 Webpack mergeDuplicateChunks 重复Chunk

浏览器加载几十个脚本文件时，最麻烦的往往不是单个模块逻辑，而是全局变量互相覆盖、脚本顺序难以维护、请求数量过多。模块打包要做的，正是把一个入口文件及其所有依赖梳理成依赖图，再生成浏览器可以直接执行的少量文件。本文先分析 CommonJS 与 ES Modules 在静态分析上的差...

栏目：JavaScript 时间：08-19 JavaScript模块打包 Webpack 模块打包原理

Webpack 的 output 配置里有一个容易被忽略的字段 auxiliaryComment，它负责在生成的库文件头部写入辅助注释。与常见的 BannerPlugin 不同，这个字段直接参与输出阶段的包装逻辑，能够根据 libraryTarget 指定的模块格式，为 UMD、CommonJS、AMD 等不同产物注入对应的注释片段。...

栏目：Webpack 时间：08-19 Webpack auxiliaryComment 模块注释

构建大型前端项目时，模块导出了什么、有没有导出，常常直接影响Tree Shaking效果。Webpack的module.parser.javascript.exportsPresence就是专门控制解析阶段对导出存在性校验行为的配置。它可设为error、warn或false，决定当代码访问不存在的导出时，是报错、警告还是静默忽略...

栏目：Webpack 时间：08-18 Webpack exportsPresence javascript_parser

浏览器默认的资源调度策略常常让关键脚本被低优先级图片阻塞。fetchpriority作为原生HTML属性，能显式干预请求顺序。在Webpack构建流程里，通过html-webpack-plugin钩子或自定义loader，可以把fetchpriority注入到script与link标签上。本文说明其取值high、low、auto的差异，以...

栏目：Webpack 时间：08-18 Webpack fetchpriority resource_loading

构建体积失控往往源于没有及时感知资源大小异常。Webpack的performance配置能在编译阶段给出明确的体积阈值警告，而不是等上线后才发现首页包过大。它支持针对资源、入口点分别设置最大限制，还可自定义提示函数。理解hints、maxAssetSize、maxEntrypointSize的作用，能帮助团...

栏目：Webpack 时间：08-16 Webpack performance配置 打包性能

一次中型项目的生产构建竟然跑了快两分钟，但翻遍配置也看不出是哪一步拖慢了整体节奏。speed-measure-webpack-plugin 正是为解决这种盲区而生，它能在不改动原有构建逻辑的前提下，给每个 loader 与 plugin 单独计时。接入方式只需用它的 wrap 方法包裹原有配置，再次运行构建...

栏目：Webpack 时间：08-16 Webpack speed-measure-webpack-plugin 构建优化

在排查Webpack构建产物引用地址异常时，不少人发现终端打印的stats.publicPath直接输出了配置里的publicPath字符串，即便CDN域名已通过运行时变量注入，统计信息里依然看不到真实地址。这其实是stats模块只读取编译期配置对象的产物。publicPath在Webpack里分静态声明与动态赋...

栏目：Webpack 时间：08-15 Webpack stats_publicPath publicPath

打包体积过大常常源于第三方库被重复打入产物。Webpack 的 externals 配置支持传入函数，依据请求路径、上下文与上下文信息实时判断某个模块是否应当作为外部依赖跳过打包。这种写法比静态对象更灵活，能区分不同入口、环境或包名前缀。本文说明该函数的入参结构、返回值含...

栏目：Webpack 时间：08-15 Webpack externals externalsFunction

构建体积膨胀导致Webpack打包耗时翻倍时，多数人习惯无脑加exclude忽略node_modules，却没算过正则匹配本身的损耗。实际上include用白名单锁定目标目录，能让loader跳过大量无关文件的路径校验，在大型仓库里比exclude少遍历数万次规则。本文从匹配机制讲清二者差异，并给出按项目...

栏目：Webpack 时间：08-15 Webpack loader_exclude loader_include

构建大型前端项目时，终端里总是被各种内部日志刷屏，真正有用的错误信息反而被淹没。Webpack 提供的 infrastructureLogging 就是专门管控这类基础设施层日志的开关。它和 stats 配置不同，只负责编译器自身、持久缓存、网络请求等底层模块的日志输出，不影响业务打包结果的展示...

栏目：Webpack 时间：08-15 Webpack infrastructureLogging 前端构建

配置Webpack插件时，不少构建异常其实来自对插件实例化时机的误解。插件必须在webpack配置对象的plugins数组中以new关键字实例化，而不是直接引用函数。如果同一个插件被重复实例化却又共享默认状态，会导致资源输出冲突或钩子重复执行。不同插件在apply方法中挂载的compiler...

栏目：Webpack 时间：08-15 Webpack plugins webpack_configuration

热更新时浏览器拉取的补丁文件命名规则由output.hotUpdateChunkFilename控制，默认值是[id].[fullhash].hot-update.js。不少项目在微前端或多实例场景下会出现热更新文件互相覆盖的问题，根源往往出在这个配置被忽略。该字段支持占位符如[id]、[hash]、[fullhash]、[runtime...

栏目：Webpack 时间：08-15 Webpack hotUpdateChunkFilename 热更新Chunk

把静态资源提前推给浏览器，能省掉关键请求往返时间，可不少人在Webpack里配http2推送时连清单都生成不对。Push Manifest本质是一份描述路径与依赖对应关系的JSON，构建阶段由插件扫描入口资源后产出。若缺少正确的manifest中间件，服务端无法识别哪些文件该主动推。本文说明如...

栏目：Webpack 时间：08-14 Webpack HTTP2_server_push push_manifest

构建大型前端项目时，终端里涌出的上千行 Webpack 输出常常让人抓不住重点，真正有用的报错反而被淹没。stats 配置项正是用来控制这些构建日志粒度的开关。通过预设值如 minimal、errors-only 可快速过滤信息，而对象形式的精细配置能决定每个模块、每个资源甚至依赖树是否打...

栏目：Webpack 时间：08-14 Webpack stats配置 build_log

打包包含Moment.js的项目时，默认会把全部语言包打进bundle，体积常突破百KB。IgnorePlugin能在模块解析阶段直接剔除匹配的路径，使moment locale文件不被打包。配置时通过requestRegExp匹配moment/locale目录，contextRegExp限定上下文，即可只保留核心时间与所需语言。相比手动...

栏目：Webpack 时间：08-14 Webpack IgnorePlugin Moment.js

把同一份源码分别跑在浏览器、Node 服务和 Electron 里，打包结果却差别巨大，关键就在 target 这一项。它告诉 Webpack 最终产物要适配哪种运行时，从而自动切换内置的全局变量、模块格式与 polyfill 策略。若设错目标，浏览器包可能混入 Node 专属模块，造成线上报错；Node 包又可...

栏目：Webpack 时间：08-14 Webpack target bundle环境

把静态资源推到CDN后页面却报404，往往是publicPath没配对。Webpack的output.publicPath决定打包后资源引用前缀，若写成相对路径或漏掉协议，浏览器会向当前域请求文件。正确做法是在生产环境设为CDN完整地址，如https://cdn.ipipp.com/assets/，使JS、CSS里的图片与chunk都带上该...

栏目：Webpack 时间：08-13 Webpack publicPath CDN加速

Webpack 的 output.module 选项常被误解为只要开启，打包结果就会变成浏览器可直接运行的原生 ES 模块。实际上它控制的是输出层语法：开启后 Webpack 生成的 JavaScript 会使用 import 和 export 语句，模块导出通过 ESM 标记暴露，而不是 CommonJS 的 require 与 module.export...

栏目：Webpack 时间：08-13 Webpack output_module ES模块

Webpack 的热更新功能依赖客户端脚本在浏览器中拉取并执行更新模块。这个脚本会在全局作用域上查找一个特定的变量，用来存放运行时需要替换的模块工厂函数和新模块代码。output.hotUpdateGlobal 这个配置项正是用来决定这个全局变量的名字。默认值是 webpackHotUpdate，但如...

栏目：Webpack 时间：08-12 Webpack hotUpdateGlobal 热更新