Reactjs 使用 Electron 进行热重载

Question

我已经克隆了this repo用于启用热重载的 ReactJS 开发。它工作正常，问题是，我想在 Electron 内部运行这个应用程序并进行热重载。所以在我的 main.js 文件中，我指向了 Reactsjs index.html 文件。它显示空白页。虽然我可以在 Electron 窗口上看到标签内容“欢迎 react ”，这意味着它指向正确，但没有显示任何内容。

我发现 Electron 抛出错误

Failed to load resource: net::ERR_FILE_NOT_FOUND   app.js

我对 React 开发还很陌生(仅在 3-4 天前开始)，所以不确定如何解决它。下面是我的目录结构和 webpack 配置

我的应用程序运行在http://localhost:8080/

目录结构

project
---node_modules
---src
------index.js
------Components  
*babelrc
index.html (used by react)
main.js (used by electron)
package.json
webpack.config.js

Webpack 配置

const webpack = require('webpack')
const path = require('path')

module.exports = {
  devtool: 'source-map',
  entry: {
    'app': [
      'babel-polyfill',
      'react-hot-loader/patch',
      './src/index'
    ]
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
    ]
  }
}

Answer 1

好吧，我终于解决了这个问题。问题在于“webpack-dev-server”，此命令创建 app.js 捆绑文件，但实际上并未将其放置在您的目录中。它是从内存中提供的，这就是它没有生成并且我的 Electron 应用程序无法找到它的原因。我在这里发布解决方案，以防任何初学者遇到同样的情况。

只需转到 package.json 并使用 --watch 参数将 webpack-dev-server 替换为 webpack，它们的工作原理几乎相同。不同之处在于 webpack --watch 将创建一个实际的捆绑文件并将其放置在您在配置中指定的目录中。

这不起作用

  "scripts": {
    "build": "webpack-dev-server --hot --history-api-fallback --open",
    "app": " ./node_modules/electron/dist/Electron.app/Contents/MacOS/Electron ."
  },

以下作品

  "scripts": {
    "build": "webpack --watch",
    "app": " ./node_modules/electron/dist/Electron.app/Contents/MacOS/Electron ."
  },