Electron+TypeScript构建报错：无法解析'fs'模块求助

我来帮你搞定这个困扰的构建问题，咱们先理清问题根源，再一步步修复：

第一个错误：Module not found: Error: Can't resolve 'fs' #

这个问题的核心是Webpack默认的打包目标是浏览器环境，而Electron的主进程是运行在Node.js环境下的，fs是Node.js的核心模块，浏览器环境下Webpack不会自动识别并包含它。你之前尝试的node: { 'fs': 'empty' }只是绕过了错误，但会导致后续运行时fs相关功能失效，不是正确的解决方案。

第二个错误：设置target: 'node'后的安装异常 #

当你把Webpack的target设为node时，Webpack会按照纯Node.js环境来打包，但Electron的主进程和普通Node环境有差异——它需要加载自身的二进制文件和内部模块，纯Node的打包逻辑会破坏Electron的模块结构，导致出现"Electron failed to install correctly"的错误，重新安装依赖也没用，因为问题出在打包配置上。

正确的解决方案 #

1. 调整Webpack配置，使用electron-main目标

Webpack 3支持专门为Electron主进程设计的target: 'electron-main'，它会自动适配Electron主进程的Node.js环境，正确处理fs等核心模块，同时不会破坏Electron的内部结构。修改你的webpack.config.js：

const path = require('path');
module.exports = {
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  // 关键：指定Electron主进程的打包目标
  target: 'electron-main',
  module: {
    rules: [
      { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

2. 完善TypeScript类型支持（可选但推荐）

你的tsconfig.json已经基本没问题，但为了让TypeScript更好地识别Electron的API，建议安装Electron的类型定义，并在配置中引入：

首先安装类型依赖：

npm install --save-dev @types/electron

然后修改tsconfig.json的compilerOptions：

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "outDir": "./dist/",
    "sourceMap": true,
    "target": "es2015",
    // 添加Electron类型
    "types": ["electron"]
  }
}

3. 重新构建并验证

先清理旧的依赖和构建产物，重新安装并构建：

# 删除旧文件
rm -rf node_modules dist
# 重新安装依赖
npm install
# 运行Webpack构建
webpack --config webpack.config.js
# 启动Electron应用
electron dist/bundle.js

补充说明 #

Electron分为主进程和渲染进程：

• 主进程（你的index.ts代码属于这类）运行在Node环境，必须用electron-main作为Webpack target；
• 如果后续开发渲染进程（比如React页面），需要用electron-renderer作为target，它会兼顾浏览器和Node环境的特性。

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