为什么 Webpack 打包后 import.meta.url 的值总是不符合预期？在原生 ESM 环境中它指向当前模块的 URL，但 Webpack 默认输出格式下会转换为基于 document.baseURI 或 worker 环境的值，导致路径解析出错。本文从 Webpack 对 import.meta.url 的内部处理机制出发，说明开启 exper...

栏目：Webpack 时间：10-07 Webpack import.meta.url ESM

import 组件时到底要不要写 .jsx？每次手动补后缀很烦，配置了 resolve.extensions 又担心解析变慢。这篇文章从 webpack 的模块解析流程讲起，分析 extensions 默认值、匹配顺序对性能和开发体验的实际影响，并给出适合不同项目结构的配置建议。还会提到多后缀同名文件、TypeScr...

栏目：Webpack 时间：10-07 resolve.extensions Webpack 文件后缀名

Webpack解析模块入口时，默认只读取package.json里的main字段，但前端生态里大量包会同时声明browser、module、jsnext:main等字段来区分不同运行环境。aliasFields的作用就是告诉Webpack按照指定顺序去读取这些字段，并在遇到对象映射时执行文件替换。本文会从配置项的实际行...

栏目：Webpack 时间：10-06 Webpack aliasFields 别名字段

先看一个容易被忽视的细节：Webpack 在查找 loader 时不会盲目遍历所有文件类型，它严格遵循模块解析规则里的扩展名列表。当你在 module.rules 中写下一个 loader 名称，Webpack 的解析器会进入一个增强的解析流程。如果没有配置 resolveLoader.extensions，系统默认只识别 .js ...

栏目：Webpack 时间：10-04 Webpack resolveLoader.extensions loader 解析

你有没有在浏览器控制台里尝试输出 process.env.NODE_ENV，结果却得到一个 ReferenceError？这个问题背后藏着 Webpack 构建阶段的一个关键动作。本文从 Node.js 环境变量与浏览器运行时的本质差异出发，拆解 Webpack 如何借助 DefinePlugin 把 process.env.NODE_ENV 替换成字...

栏目：Webpack 时间：10-03 Webpack process.env.NODE_ENV DefinePlugin

Webpack 内置的 splitChunks 插件通过将公共依赖提取为单独文件，直接影响浏览器缓存命中率与首屏加载性能。围绕 chunks 匹配范围、minSize 与 maxSize 体积阈值、minChunks 引用次数以及 cacheGroups 缓存组策略展开，说明如何针对第三方库、业务公共模块和异步组件分别设...

栏目：Webpack 时间：10-03 Webpack splitChunks 代码分割

output.environment.arrowFunction 这一配置项的作用范围，常常被误认为是源代码中转译箭头函数的开关。实际上它只控制 Webpack 自身生成的运行时代码和模块包裹函数是否使用箭头函数语法。默认情况下该值为 true，打包产物中会保留箭头函数，这能减少一些字符；当需要兼容 IE11...

栏目：Webpack 时间：10-02 Webpack output.environment 箭头函数

Moment.js 在 Webpack 构建时会把 lib/locale 下的全部语言文件打进 bundle，即使项目中只用到中英文，产物体积也会多出几十 KB。moment-locales-webpack-plugin 的作用就是在打包阶段剥离多余 locale，只保留指定的语言包，从而减小 chunk 体积。本文从 Moment.js 语言包被整体...

栏目：Webpack 时间：10-02 moment-locales-webpack-plugin Webpack Moment.js

import一个Excel文件然后直接在浏览器里遍历单元格，这种需求在报表后台、数据录入工具中很常见。Webpack默认无法识别.xlsx后缀，打包时直接抛出Module parse failed错误。xlsx-loader的作用就是在模块解析阶段介入，借助SheetJS解析工作簿内容，把每个工作表的行数据转成JSON数...

栏目：Webpack 时间：10-02 Webpack xlsx-loader Excel数据处理

构建日志里成堆的黄色 warning 能不能一键关闭？stats.warnings 是否就是那个开关？答案是肯定的，但它的作用仅限于控制警告是否显示，并不会阻止警告产生。本文围绕 Webpack 的 stats 配置展开，先说明 stats.warnings 的默认值与布尔值语义，再演示如何配合 warningsFilter 过滤特...

栏目：Webpack 时间：10-02 Webpack stats.warnings 构建警告

调试 Webpack 构建时，日志信息往往只显示消息内容，却难以判断这条日志究竟由哪个 loader 或 plugin 触发。stats.loggingTrace 这个配置项专为解决此类问题而生，它可以将日志产生的调用堆栈一并输出，从而快速定位到源码中的具体位置。本文从该选项的底层行为切入，解释 Webpack...

栏目：Webpack 时间：10-01 Webpack stats.loggingTrace 堆栈跟踪

Webpack在打包包含大型JSON文件的项目时，经常出现构建进程内存暴涨甚至OOM崩溃的情况。根本原因在于Webpack默认将JSON文件整体解析为JavaScript对象，一次性加载全部数据到内存，对于几十MB甚至上百MB的JSON文件，内存消耗会呈倍数增长。本文从Webpack处理JSON的内部机制入手，分...

栏目：Webpack 时间：09-30 Webpack JSON解析 流式处理

前端联调阶段经常出现一个奇怪现象：本地页面能正常加载，但调用接口时被浏览器提示跨域失败。检查发现后端已经返回了允许跨域的响应头，可请求还是被拦截。问题往往出在本地开发服务器没有把响应头完整转发出来。Webpack 的 devServer.headers 配置项就是用来解决这类问题的，...

栏目：Webpack 时间：09-30 Webpack devServer.headers 响应头

当站点启用严格的内容安全策略（CSP）并要求脚本必须符合 Trusted Types 时，Webpack 打包产物中用于动态加载 chunk 的常规赋值方式会直接被浏览器拦截。Webpack 5 在 output 配置中提供了 trustedTypes 字段，允许运行时把动态脚本 URL、脚本内容等危险值包装成 TrustedScriptU...

栏目：Webpack 时间：09-28 Webpack Trusted Types CSP

想给 Create React App 项目加上 Less 支持或配置路径别名，却发现默认的 Webpack 设置被 react-scripts 藏得严严实实？执行 npm run eject 后，所有配置会暴露到项目根目录，但面对 config 目录里多出来的几个文件，如何下手是个问题。本文围绕 eject 后的 Webpack 配置实战展开，...

栏目：Webpack 时间：09-28 Webpack Create React App 自定义配置

首屏加载时样式文件阻塞渲染是Web应用常见的性能瓶颈。将首屏关键样式内联到HTML中，其余CSS异步加载，能明显加快首次绘制速度。本文以Webpack构建工具为背景，介绍critical-css相关插件的使用思路，从提取范围、内联策略到缓存处理逐一说明，帮助开发者在实际项目中落地首屏优化...

栏目：Webpack 时间：09-27 Webpack Critical CSS 首屏渲染

Webpack打包后图片路径总是404？这往往与module.generator的配置有关。作为Webpack 5引入的资源模块体系中的关键部分，generator决定了asset/resource、asset/inline等类型模块在输出阶段如何生成文件、设置公共路径以及是否内联为Data URI。通过为特定规则配置generator，可...

栏目：Webpack 时间：09-27 Webpack module.generator Asset Modules

Webpack 的 resolve 配置项控制着模块如何被解析，其中 enforceExtension 的作用常常被误解。这个布尔值默认关闭，表示导入模块时可以省略文件扩展名，由 Webpack 按照 resolve.extensions 数组中的顺序自动补全。一旦把 enforceExtension 设为 true，所有相对路径或绝对路径的...

栏目：Webpack 时间：09-27 Webpack resolve.enforceExtension 模块解析

项目体积变大后，每次执行 webpack 构建都要等上几十秒甚至几分钟，可到底时间消耗在哪个环节？可能不是依赖包太多，也不是代码写得太复杂，而是缺少一份可量化的性能画像。Webpack 自带的 profile 选项就是为这种场景准备的。开启后，构建过程会记录每个模块的处理耗时、依赖解析耗...

栏目：Webpack 时间：09-25 Webpack profile 性能分析

全局样式污染是不是你接手老项目时最头疼的问题？同一个 .button 类名在不同页面被反复覆盖，改一处样式却引发连锁反应。CSS Modules 提供了一种轻量的局部作用域方案，它不需要引入额外的运行时依赖，而是借助构建工具在编译阶段把类名改写成带哈希的唯一标识，从源头避免冲突。...

栏目：Webpack 时间：09-25 CSS Modules Webpack 样式隔离

模块解析范围失控会让构建结果悄悄引入 node_modules 之外的文件，或者让一个 monorepo 子包误引用另一个无关包。Webpack 的 resolve.restrictions 正是为此设计，它给所有模块请求加了一层路径白名单校验。该选项接收绝对路径字符串或正则表达式数组，当 import 或 require ...

栏目：Webpack 时间：09-25 Webpack resolve.restrictions 模块解析

前端工程一旦引入 TypeScript，构建链路就需要同时承担语法转换与类型校验两件事。直接在 Webpack 里使用 ts-loader 虽然省事，但随着模块数量上升，每次构建都完整调用 TypeScript 编译器会让速度明显变慢。本文从转译与检查分离的角度展开，介绍如何让 babel-loader 专注剥离...

栏目：Webpack 时间：09-24 Webpack TypeScript Babel

webpack 的 output.scriptType 配置项看似只影响 HTML 里 script 标签的 type 属性，但它直接决定了浏览器以何种模式加载打包产物。当值设为 module 时，html-webpack-plugin 会输出带 type=module 的脚本标签，浏览器会按照 ES Module 规则延迟执行、开启严格模式并支持模块...

栏目：Webpack 时间：09-24 Webpack output.scriptType textjavascript

output.hashSalt 这个配置项，本质上是在 Webpack 生成文件名哈希之前，向哈希计算过程中额外拼接的一段字符串。Webpack 默认使用 md4 或自定义的哈希算法对文件内容做摘要，而加入盐值后，即使源代码没有变化，最终计算出的 contenthash 或 chunkhash 也会发生改变。这就为前端部...

栏目：Webpack 时间：09-22 Webpack output.hashSalt 哈希盐值

Electron 主进程打包时最让人头疼的莫过于 serialport、better-sqlite3 这类依赖原生二进制文件的模块，Webpack 构建后经常报错找不到 .node 文件，或者运行时提示模块 ABI 版本不匹配。这些问题大多是因为 Webpack 默认把 require 当作普通 JavaScript 模块处理，无法理解 .n...

栏目：Webpack 时间：09-22 Webpack Electron native模块