Webpack externalsType配置疑问：如何通过externals优化Node包体积

核心问题澄清 #

Externals 的作用是告诉 Webpack 不要把指定模块打包进你的输出文件，而是让最终使用你的包的消费者环境（比如 Node.js 项目、浏览器构建工具）来提供这些模块。它不会让消费者完全不需要依赖这些模块，只是把这些模块的打包/引入责任转移给了消费者，从而减小你的包的体积。

externalsType 各类型作用与适用场景 #

直接说人话，不用官方术语绕圈：

• commonjs/commonjs2：
  • 生成 require('模块名') 格式的代码，专门针对 Node.js 环境或使用 CommonJS 规范的构建工具（比如 Webpack/Rollup 转译 CommonJS 的项目）。
  • 适用场景：你的包是给 Node.js 项目用的，或者兼容 CommonJS 生态的前端项目。
• var：
  • 生成依赖全局变量的代码（比如 window.Bootstrap），只能用于浏览器端全局引入第三方库的场景。
  • 缺点：无法按需引入子模块，因为全局变量是整个库的导出，而且依赖消费者手动在全局挂载变量，灵活性极低。
• umd：
  • 生成兼容 CommonJS、AMD、全局变量的代码，适合既要支持 Node.js 又要支持浏览器全局引入的包。
  • 缺点：额外的兼容逻辑会增加一点包体积，且不如针对性的类型精准。
• module：
  • 生成 ES 模块的 import 语句，适合现代 ES 模块环境（比如 Node.js 12+ 启用 ES 模块、Webpack 5+、Rollup）。
  • 优势：配合输出 ES 模块，能更好地支持树摇优化。

针对你需求的解决方案（Bootstrap 子模块按需排除） #

你要的是不打包 Bootstrap 子模块，同时允许消费者按需引入这些子模块，完全不需要用 var 类型，正确配置如下：

1. 精准配置单个子模块的 Externals #

不要把整个 Bootstrap 设为 external，而是针对你用到的子模块单独配置，同时指定 externalsType 为 commonjs（或 module，如果你输出 ES 模块）：

// webpack.config.js
module.exports = {
  // 其他配置...
  externals: {
    // 针对你用到的 Bootstrap 子模块逐一配置
    'bootstrap/dropdown': 'commonjs bootstrap/dropdown',
    '@popperjs/core': 'commonjs @popperjs/core', // Bootstrap dropdown 依赖的 Popper
    // 如果用到其他子模块，比如 bootstrap/alert，同理添加
    // 'bootstrap/alert': 'commonjs bootstrap/alert'
  },
  // 全局设置默认 externals 类型，也可以在每个 external 项里单独指定
  externalsType: 'commonjs',
  // 如果你输出的是 ES 模块，建议改成：
  // externalsType: 'module',
  // output: {
  //   module: true,
  //   filename: '[name].mjs'
  // }
};

2. 为什么之前用 commonjs 消费者还会引入 Bootstrap？ #

这是正常逻辑：Externals 只是不把 Bootstrap 代码放进你的包，消费者使用你的包时，依然需要安装 Bootstrap 作为依赖（你可以在 package.json 的 peerDependencies 里声明 Bootstrap 的版本范围，提醒消费者安装）。但消费者可以通过自己的构建工具（比如 Webpack 树摇、Rollup）来按需引入他们需要的子模块，而你的包体积已经被大幅减小了。

3. 额外优化：利用 externalsPresets #

如果你的包是纯 Node.js 包，可以启用 externalsPresets.node，自动排除 Node.js 核心模块（比如 fs、path），不用手动配置：

module.exports = {
  externalsPresets: { node: true },
  // 其他配置...
};

关键误区纠正 #

• 不要用 var 类型来实现体积优化，除非你明确消费者是通过 CDN 全局引入 Bootstrap 的场景——这显然不符合按需引入的需求。
• Externals 不是让消费者“不用装依赖”，而是让你的包不包含第三方代码，把依赖的管理交给消费者，从而减小你的包的分发体积。

内容的提问来源于stack exchange，提问作者Shashank Bhatt