webpack5打包供Node执行的依赖包时出现document is not defined错误如何解决

1. 显式指定webpack构建目标 #

你已经配置了Node专属的外部依赖和导出规则，但没有明确告诉webpack整体构建目标为Node环境，这会导致依赖内置的环境判断逻辑误判为浏览器环境。在webpack配置中新增target: 'node'配置即可：

// webpack.config.js
module.exports = {
  // 新增该行，强制适配Node.js构建逻辑
  target: 'node',
  externalsPresets: { node: true },
  output: {
    libraryTarget: "commonjs"
  }
  // 其余原有配置保持不变
}

2. 注入浏览器全局变量兜底 #

部分第三方依赖会硬编码判断document/window是否存在，不会走webpack的自动适配逻辑，你可以通过插件给这类变量提供Node环境下的空值mock：
首先安装mock依赖：
npm install global --save

然后修改webpack配置的plugins字段：

const webpack = require('webpack')
module.exports = {
  // 其余配置保持不变
  plugins: [
    new webpack.ProvidePlugin({
      window: 'global/window',
      document: 'global/document',
    }),
    // 强制覆盖环境判断变量
    new webpack.DefinePlugin({
      'process.browser': JSON.stringify(false),
      'typeof window': JSON.stringify('undefined'),
      'typeof document': JSON.stringify('undefined')
    })
  ]
}

3. 补全eval执行的上下文 #

直接require代码时运行在完整的Node模块上下文，而eval默认上下文缺少webpack打包代码依赖的模块级全局标识，执行时主动注入完整上下文即可：

const bundleCode = // 你拉取到的打包后代码字符串
const runBundle = eval(`(module, exports, require, __dirname, __filename, global) => {
  ${bundleCode}
  return module.exports
}`)
// 传入完整Node模块参数
const libraryExport = runBundle(module, exports, require, __dirname, __filename, global)

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