本文详解如何为 Express 类 Node.js 服务端项目（含 TypeScript）配置 Webpack，重点解决 Webpack 5+ 中 Node 核心模块缺失、Critical dependency 警告及多环境构建混乱等问题，推荐采用 webpack-node-externals 实现零干扰打包。
本文详解如何为 express 类 node.js 服务端项目（含 typescript）配置 webpack，重点解决 webpack 5+ 中 node 核心模块缺失、`critical dependency` 警告及多环境构建混乱等问题，推荐采用 `webpack-node-externals` 实现零干扰打包。
在 Node.js 后端项目中直接使用 Webpack，其核心目标并非“浏览器化”代码，而是实现 TypeScript 编译、代码分割、开发热重载与生产环境打包优化。但若沿用前端配置思路（如强行 polyfill fs/path/os 等核心模块），反而会触发大量错误和警告——正如你遇到的 Module not found: Can't resolve 'os' 和 Critical dependency: the request of a dependency is an expression。根本原因在于：Webpack 默认面向浏览器环境，而 Node.js 应用依赖原生模块和动态 require，二者语义冲突。
✅ 正确解法是：明确声明 target: 'node'，并配合 webpack-node-externals 排除所有 node_modules 中的原生依赖，让它们保持 require() 原始调用，不参与打包。这既避免了 polyfill 的复杂性，又消除了因尝试打包 CJS 动态引用导致的警告。
✅ 推荐最小可行配置（基于 Webpack 5+）
首先安装必要依赖：
npm install --save-dev webpack webpack-cli ts-loader typescript webpack-node-externals
然后创建精简、健壮的 webpack.config.js：
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
mode: 'development', // 或 'production'
target: 'node', // 关键：明确告知 Webpack 运行于 Node.js 环境
entry: path.resolve(__dirname, 'bin/www.ts'),
output: {
filename: 'server.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
externals: [nodeExternals()], // ✅ 核心：排除所有 node_modules，保留原生 require
resolve: {
extensions: ['.ts', '.js'],
// 不需要 fallback！Node 模块无需浏览器 polyfill
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: 'ts-loader',
},
],
},
// 开发时启用源码映射与 watch
devtool: 'source-map',
watchOptions: {
ignored: /node_modules/,
},
};
⚠️ 为什么其他方案会失败？
- 手动配置 fallback：Webpack 5 已移除内置 polyfill，强行引入 crypto-browserify 等会导致运行时行为异常（如加密失效、流处理错误），且无法覆盖 fs/child_process 等真正不可浏览器化的模块。
- 不设 target: 'node'：Webpack 会按浏览器目标解析模块，导致 os、path 等被当作缺失资源报错。
- 未使用 externals：Webpack 尝试打包 express、multer、mongodb 等 CJS 包，触发动态 require() 警告（如 view.js 81:13-25）及第三方插件（如 mongodb-client-encryption）路径解析失败。
? 进阶建议
- 多入口分离（可选）：若需同时构建前端资源（如 public/javascripts/ 下的客户端 JS），应拆分为两个独立配置（webpack.server.config.js + webpack.client.config.js），分别设置 target: 'node' 和 target: 'browserslist'，避免混用。
- TypeScript 支持优化：确保 tsconfig.json 中 "module": "commonjs" 与 Webpack 兼容；若使用 ESM，需额外配置 output.module: true 及 "type": "module" in package.json。
- 生产构建：mode: 'production' 自动启用压缩与 Tree Shaking（对纯 CommonJS 效果有限，但仍有体积优化）；建议配合 cross-env NODE_ENV=production 启动。
- 调试支持：生成 source-map 后，VS Code 可直接断点调试 dist/server.js，体验接近源码。
✅ 验证是否成功
运行构建命令：
npx webpack --config webpack.config.js
成功输出 dist/server.js 后，直接运行：
node dist/server.js
服务应正常启动，无任何 Module not found 错误或 Critical dependency 警告。
? 总结：Node.js 的 Webpack 配置哲学是 “少即是多” —— 不试图模拟浏览器环境，而是尊重 Node 原生能力，用 externals 做减法，用 target: 'node' 做声明。删掉所有 fallback、plugins（如 MiniHtmlWebpackPlugin 不适用于后端）、devServer（前端开发服务器对 API 无意义），回归本质，问题自然迎刃而解。
