如何在Electron-React应用中动态加载HTML文件？

我帮不少做React+Electron开发的朋友解决过这个问题，你遇到的报错本质是Webpack默认不知道怎么解析.html后缀的文件——纯React项目里可能你之前用了Create React App的默认配置（它悄悄处理了这些资源），但切换到Electron环境后，Webpack配置需要手动调整才行。

下面是一步步的解决办法：

1. 安装处理HTML的Webpack Loader #

首先得装html-loader，它能把HTML文件转换成字符串，让React组件可以直接引入。打开终端跑这个命令：

npm install html-loader --save-dev
# 用yarn的话就换这个
yarn add html-loader --dev

2. 修改Webpack配置文件 #

找到你的Webpack配置文件（Electron项目通常会分主进程webpack.main.config.js和渲染进程webpack.renderer.config.js，一定要改渲染进程的配置，因为React组件跑在渲染进程里），在module.rules数组里添加处理HTML的规则：

module.exports = {
  // 其他已有配置（比如入口、输出、babel规则）
  module: {
    rules: [
      // 保留你已有的js/jsx处理规则
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      // 新增这条HTML处理规则
      {
        test: /\.html$/,
        use: 'html-loader'
      }
    ]
  }
};

3. 在React组件里正确引入并使用HTML #

现在你可以在组件里正常引入外部HTML了，用dangerouslySetInnerHTML把HTML字符串插入到组件中：

import React from 'react';
// 引入你的HTML文件，路径要对应正确
import partlistHtml from './9501.010400.html';

const PartlistComponent = () => {
  return (
    // 注意：确保这个HTML是安全的，没有恶意脚本，避免XSS风险
    <div dangerouslySetInnerHTML={{ __html: partlistHtml }} />
  );
};

export default PartlistComponent;

4. 要是还报错？试试这些排查点 #

• 重启开发服务器！修改Webpack配置后必须重启才能生效，很多人都忘了这一步。
• 检查HTML文件的路径有没有拼写错误，Webpack找不到文件也会报类似的错。
• 如果你用的是cra-electron这类基于Create React App的封装工具，默认不让改Webpack配置，这时候得用react-app-rewired来覆盖配置：
  1. 先装依赖：

     npm install react-app-rewired customize-cra --save-dev
     

  2. 在项目根目录新建config-overrides.js，内容如下：

     const { override, addModuleRule } = require('customize-cra');
     
     module.exports = override(
       addModuleRule({
         test: /\.html$/,
         use: 'html-loader'
       })
     );
     

  3. 最后修改package.json里的启动命令，把react-scripts换成react-app-rewired，比如：

     "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test"
     }
     

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