如何让Electron应用在编译时将文件读取到变量且不打包依赖文件

方案1：编译期直接注入内容到JS Bundle（优先推荐，完全满足不单独打包HTML的需求） #

electron-react-boilerplate默认基于Webpack构建，你可以通过raw-loader在编译阶段直接将HTML文件内容读取为字符串变量，不会产生独立的HTML资源文件，天然跨平台无差异。

• 步骤1：安装依赖
  npm install raw-loader --save-dev
• 步骤2：修改Webpack配置
  erb的Webpack配置分为主进程、渲染进程两类，你根据自己的使用场景修改对应配置文件（主进程用改webpack.config.main.prod.js，渲染进程用改webpack.config.renderer.prod.js），新增loader规则：

module.exports = {
  // 其他原有配置保持不变
  module: {
    rules: [
      // 其他原有规则保持不变
      {
        test: /\.html$/,
        use: 'raw-loader'
      }
    ]
  }
}

如果是较新版本的erb，无需安装额外依赖，直接在导入路径加?raw后缀即可，无需修改Webpack配置：

import htmlContent from './你的目标文件路径.html?raw';

• 步骤3：业务代码直接使用
  导入后得到的变量就是编译期读取到的HTML纯文本内容，直接按照需求使用即可：

import htmlContent from './你的目标文件路径.html';
// 示例：直接用在渲染层或者主进程创建窗口时的加载内容
mainWindow.loadURL(`data:text/html;charset=utf-8,${encodeURIComponent(htmlContent)}`);

方案2：修复原有extraResources跨平台打包异常的问题 #

如果你暂时不需要把内容打进JS Bundle，只是要解决原有资源打包Windows不生效的问题，修改electron-builder配置即可：

• 步骤1：修改package.json中的build配置
  erb默认使用electron-builder打包，在package.json的build节点下新增统一的extraResources规则：

{
  "build": {
    // 其他原有配置保持不变
    "extraResources": [
      {
        "from": "存放HTML文件的源目录路径/",
        "to": "resources/",
        "filter": ["**/*.html"]
      }
    ]
  }
}

• 步骤2：使用统一跨平台路径读取资源

import { app } from 'electron';
import path from 'path';
import fs from 'fs/promises';

const getHtmlContent = async () => {
  const basePath = app.isPackaged ? process.resourcesPath : app.getAppPath();
  const htmlPath = path.join(basePath, '你的HTML文件名.html');
  return await fs.readFile(htmlPath, 'utf-8');
}

注意事项 #

• 采用方案1时，如果HTML内包含相对路径引用的静态资源（图片、CSS等），需要将这些资源也同步配置打包规则，或者替换为绝对路径引用，避免运行时资源找不到。
• 方案1完全不会将HTML文件单独打入安装包，比方案2更符合你的安全需求。

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