求Electron+Typescript+Webpack全流程构建项目样板

我完全懂你的困扰——找一个能让Electron、TypeScript和Webpack完美协同，同时用Webpack打包主进程和渲染进程TypeScript代码的样板真的挺费劲的，很多现成的要么主进程还是纯JS，要么用tsc单独编译TS而不是统一用Webpack处理。

下面是我自己整理并一直在用的一套样板结构，主进程和渲染进程全用TypeScript编写，且都通过Webpack完成打包，支持开发热重载，结构清晰易扩展：

项目基础结构 #

project-root/
├── src/
│   ├── main/
│   │   ├── index.ts       # 主进程入口文件
│   │   └── tsconfig.json  # 主进程专属TS配置
│   └── renderer/
│       ├── index.ts       # 渲染进程入口文件
│       ├── index.html     # 渲染页面模板
│       └── tsconfig.json  # 渲染进程专属TS配置
├── webpack.main.config.ts    # 主进程Webpack配置
├── webpack.renderer.config.ts # 渲染进程Webpack配置
├── package.json
└── tsconfig.json          # 根TS配置（给IDE提供全局类型提示）

关键配置细节 #

1. package.json 脚本依赖 #

{
  "name": "electron-ts-webpack-starter",
  "version": "1.0.0",
  "main": "./dist/main/index.js",
  "scripts": {
    "build:main": "webpack --config webpack.main.config.ts",
    "build:renderer": "webpack --config webpack.renderer.config.ts",
    "build": "npm run build:main && npm run build:renderer",
    "start": "npm run build && electron ./dist/main/index.js",
    "dev": "concurrently \"webpack --watch --config webpack.main.config.ts\" \"webpack serve --config webpack.renderer.config.ts\" \"electron ./dist/main/index.js\""
  },
  "devDependencies": {
    "electron": "^28.0.0",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1",
    "ts-loader": "^9.5.1",
    "typescript": "^5.3.3",
    "concurrently": "^8.2.2",
    "@types/node": "^20.10.4",
    "html-webpack-plugin": "^5.5.3"
  }
}

• dev 命令用 concurrently 同时启动主进程Webpack监听、渲染进程DevServer和Electron，实现开发时的热更新
• build 命令会分别打包主进程和渲染进程代码到 dist 目录

2. 主进程Webpack配置（webpack.main.config.ts） #

import path from 'path';
import webpack from 'webpack';

const config: webpack.Configuration = {
  target: 'electron-main', // 明确指定Electron主进程目标
  entry: './src/main/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist/main'),
    filename: 'index.js',
    clean: true, // 打包前清空输出目录
  },
  resolve: {
    extensions: ['.ts', '.js'], // 优先解析TS文件
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  node: {
    __dirname: false, // 保留Node.js原生的__dirname行为
    __filename: false,
  },
};

export default config;

3. 渲染进程Webpack配置（webpack.renderer.config.ts） #

import path from 'path';
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const config: webpack.Configuration = {
  target: 'electron-renderer', // 明确指定Electron渲染进程目标
  entry: './src/renderer/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist/renderer'),
    filename: 'index.js',
    clean: true,
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/renderer/index.html', // 自动注入打包后的JS到HTML
    }),
  ],
  devServer: {
    static: path.resolve(__dirname, 'dist/renderer'),
    port: 3000,
    hot: true, // 渲染进程热重载
  },
};

export default config;

4. TS配置文件 #

根目录的 tsconfig.json 作为全局基础配置：

{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "lib": ["ES2020", "DOM"] // 渲染进程需要DOM库
  }
}

主进程的 src/main/tsconfig.json 继承根配置并调整适配Node环境：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "outDir": "../../dist/main",
  },
  "include": ["**/*.ts"]
}

渲染进程的 src/renderer/tsconfig.json 适配浏览器环境：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "outDir": "../../dist/renderer",
  },
  "include": ["**/*.ts"]
}

这个样板的优势 #

• 主进程和渲染进程全TypeScript编写，统一用Webpack打包，避免tsc和Webpack混用的混乱
• 开发模式支持热重载，主进程代码变更会自动重新编译并重启Electron，渲染进程支持实时刷新
• 配置清晰，每个部分职责明确，方便后续扩展（比如添加React/Vue、CSS预处理器、代码压缩等）
• 所有配置文件用TypeScript编写，和项目技术栈保持一致，更易维护

你可以直接复制这套结构和配置，根据自己的需求调整依赖版本或添加额外功能，亲测能完美解决三者协同的问题。

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