Webpack中排除node_modules需三处配置:loader规则中用exclude+/node_modules/;devServer.watchFiles限定源码路径;tsconfig.json和.vscode/settings.json中同步排除。

Webpack 本身不直接“监听文件变化”来触发构建,而是由 webpack-dev-server 或 webpack watch 模式负责文件监听。真正需要排除 node_modules 的地方有两个关键层级:Loader 规则中的 exclude,以及开发服务器的 watchFiles 或底层文件系统监听配置。
在 ts-loader / babel-loader 中排除 node_modules
这是最核心、必须做的一步。不加 exclude 会导致 Webpack 尝试用 TypeScript 编译器去处理成千上万个第三方模块,严重拖慢启动和热更新速度,甚至报错。
- 在
webpack.config.js的module.rules中,为ts-loader显式设置exclude: /node_modules/ - 正则写法要准确:
/node_modules/(斜杠包围,不带引号内的反斜杠转义) - 推荐同时用
include锁定源码目录,比只靠exclude更安全:
在 webpack-dev-server 中限制监听范围
默认情况下,dev-server 可能会监听整个项目目录(包括 node_modules),尤其在软链接或 pnpm monorepo 场景下容易误触。手动指定监听路径可避免无效重建。
基于三引擎设计,从微信文章、新闻和博客网页提取干净内容,支持标题作者日期元数据,多格式和批量处理。
- 在
devServer.watchFiles中只列你关心的源码路径 - 例如仅监听
src/**/*和根目录下的tsconfig.json - 该配置从 Webpack 5.74+ 开始支持,替代旧版
watchOptions的复杂写法
配合 VSCode 和 TypeScript 服务一起排除
Webpack 配置只是构建层,编辑器里的类型服务(TSServer)也会扫描 node_modules,造成卡顿。需同步在项目级设置中排除:
- 在
.vscode/settings.json中配置files.watcherExclude - 加上
"**/node_modules/**": true等常用构建产物路径 - 同时在
tsconfig.json的exclude字段里也写一遍,双重保险
为什么不能只靠 .gitignore 或右键 Mark as Excluded
.gitignore 对 Webpack 和 TSServer 完全无效;IDE 中右键 “Mark as Excluded” 仅影响项目视图,不改变实际文件监听行为,还可能破坏 @types 解析。真正的排除必须落在配置代码里——loader 规则、devServer 配置、tsconfig 排除项这三处缺一不可。

















