Reactjs 用电子热重载答案

【问题标题】：Reactjs hot reloading with electronReactjs 用电子热重载
【发布时间】：2017-12-18 18:01:23
【问题描述】：

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

我发现电子正在抛出错误

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

我对反应开发很陌生（仅在 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' }
    ]
  }
}

【问题讨论】：

您收到错误是因为 index.html 在其初始脚本标记中引用了 app.js。 Webpack 应该将一个名为 app.js 的文件输出到您的 dist 目录中。会不会是权限问题？
我只是注意到没有创建 ./dist 文件夹，也没有 app.js 文件，但是问题来了，为什么 react app 在浏览器中运行良好，它令人困惑。不应该有任何权限问题，因为我在本地电脑上。
这很奇怪，开箱即用。
你能把它发布到 git 上，我可以克隆和比较。
从字面上看，只是点击了您帖子中的链接

标签： reactjs webpack electron webpack-dev-server

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

要运行 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" ]
}

【讨论】：

热重载在浏览器中工作正常，问题是它在电子窗口中没有显示任何内容。