Reactjs 热重载电子

Question

我已经克隆了 this repo 用于启用热重载的 reactjs 开发。它工作正常，问题是，我想运行这个应用程序在 electron 中热重载。所以在我的 main.js 文件中，我指向 reactsjs index.html 文件。它显示空白页。虽然我可以在 electron window 上看到标签内容 "Welcome to 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

到运行 react-hot-loader 你应该将它添加到webpack.config.js中的模块中，如下所示

module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: ['react-hot-loader/webpack','babel-loader']
      }
    ]
  },

您还应该将其添加到 .babelrc 中，如下所示：

{
    "presets": [
        "es2015",
        "react"
    ],
    "plugins": [ "react-hot-loader/babel" ]
}

Answer 2

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

只需转到 package.json 并将 webpack-dev-server 替换为带有 --watch param 的 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 ."
  },

Reactjs 热重载电子

Reactjs hot reloading with electron

reactjs

webpack

webpack-dev-server

electron