Webpack配置target: 'node-webkit'报错：Uncaught ReferenceError: require未定义

你遇到的问题本质是：当Webpack target设为node-webkit时，它默认会把Node.js核心模块（比如querystring）当作外部依赖，认为这些模块会由NWJS的Node运行时提供。但在浏览器环境下，既没有Node的require函数，也没有内置的querystring模块，自然就抛出了未定义的错误。

下面是几个实用的解决方案，你可以根据项目情况选择：

1. 按环境区分Webpack配置（推荐） #

通过环境变量切换target和外部依赖规则，让Webpack在浏览器环境下自动打包Node核心模块：

module.exports = (env) => {
  const isNWJS = env.target === 'node-webkit';
  
  return {
    // 根据构建目标设置target
    target: isNWJS ? 'node-webkit' : 'web',
    
    // 控制外部依赖的处理逻辑
    externals: isNWJS 
      ? { 
          // NWJS环境下保留Node模块作为外部依赖，由Node环境提供
          querystring: 'commonjs querystring'
        }
      : {
          // 浏览器环境下不把querystring当作外部依赖，直接打包进bundle
          querystring: false
        },
    
    resolve: {
      // 可选：如果原生querystring在浏览器有兼容问题，替换为浏览器友好的实现
      ...(!isNWJS && {
        alias: {
          'querystring': 'querystring-es3'
        }
      })
    },
    
    // 其他Webpack配置（entry、output等）...
  };
};

构建时通过环境变量指定目标：

# 构建NWJS版本
webpack --env target=node-webkit
# 构建浏览器版本
webpack --env target=web

2. 代码层面做环境判断 #

如果你的代码里直接用require引入了Node模块，可以在代码中加入环境检测，切换不同的引入逻辑：

let querystring;
// 判断是否处于NWJS环境（浏览器环境下没有process.versions['node-webkit']）
if (typeof process === 'undefined' || !process.versions['node-webkit']) {
  // 浏览器环境：引入兼容版的querystring
  querystring = require('querystring-es3');
} else {
  // NWJS环境：使用Node原生querystring
  querystring = require('querystring');
}

这种方式适合小范围的模块引用，不需要大幅修改Webpack配置。

3. 用webpack-node-externals优化NWJS依赖 #

如果项目依赖大量Node模块，可以用webpack-node-externals自动处理NWJS的外部依赖，同时手动排除需要在浏览器中打包的模块：

const nodeExternals = require('webpack-node-externals');

module.exports = (env) => {
  const isNWJS = env.target === 'node-webkit';
  
  return {
    target: isNWJS ? 'node-webkit' : 'web',
    externals: isNWJS 
      ? [nodeExternals({
          // 排除需要打包进NWJS的模块（如果有的话）
          allowlist: ['某些需要打包的模块']
        })]
      : {},
    
    // 其他配置...
  };
};

这个工具会自动把node_modules里的模块设为外部依赖，减少NWJS版本的bundle体积，同时不影响浏览器版本的构建。

核心思路就是：让Webpack在不同环境下对Node核心模块采取不同策略——NWJS环境依赖Node原生模块，浏览器环境要么打包兼容版，要么把原生模块打包进bundle。

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