配置electron-webpack渲染器以适配nodeIntegration: false环境

这个问题我之前也踩过坑，核心原因就是electron-webpack默认会把渲染器进程当成Node环境打包，但当你关闭nodeIntegration后，渲染器是纯浏览器环境，根本没有Node的module、require这些全局变量。webpack误以为环境里已经自带这些东西，就没把自己的模块加载逻辑注入到bundle里，自然运行时就会报错了。

下面是具体的解决步骤：

• 明确指定渲染器的webpack target为web
  你需要给渲染器单独配置webpack的target，告诉它要按照浏览器环境打包。可以创建一个webpack.renderer.config.js文件：

  module.exports = {
    target: 'web'
  }
  

  然后在electron-webpack.json里关联这个配置：

  {
    "renderer": {
      "webpackConfig": "webpack.renderer.config.js"
    }
  }
  

  这样webpack就会自动注入它自己的模块加载机制，bundle里就会包含module相关的定义了。

• 可选：调整output的libraryTarget（如果仍有问题）
  有时候仅仅设置target还不够，可以手动指定output的libraryTarget为umd，让bundle兼容更多环境：

  module.exports = {
    target: 'web',
    output: {
      libraryTarget: 'umd'
    }
  }
  

• 清理依赖中的Node API依赖
  检查你的项目依赖，有没有依赖Node核心模块（比如fs、path）的包，如果有要么替换成浏览器兼容的版本，要么用webpack的externals排除它们（如果是自己的代码，一定要避免在渲染器里直接用Node API）。

• 确认BrowserWindow的配置正确
  确保你的窗口配置确实关闭了nodeIntegration，并且推荐开启contextIsolation（这是Electron的安全最佳实践）：

  const { BrowserWindow } = require('electron');
  const path = require('path');
  
  new BrowserWindow({
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js') // 如果需要和主进程通信，用preload脚本做中转
    }
  });
  

  如果需要在渲染器里和主进程通信，必须通过preload脚本暴露安全的接口，不能直接访问Node API。

这样调整后，你的渲染器bundle就会在纯浏览器环境下正常运行，不会再出现"module未定义"的错误了。

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