Reactjs电子热装

Question

我已经在启用热重载的情况下为Reactjs开发克隆了这个仓库。它的工作正常，问题是，我想通过热重装在电子内部运行此应用程序。因此，在我的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' }
    ]
  }
}

Answer 1

好的，最后我设法解决了。问题出在“ webpack-dev-server”上，该命令创建了app.js捆绑文件，但实际上并未将其放置在您的目录中。它由内存提供服务，这就是为什么它没有生成并且我的电子应用程序无法找到它的原因。我在这里发布解决方案，以防任何初学者面临相同的情况。

只需转到package.json并将webpack-dev-server替换为带有--watchparam的webpack ，它们的工作原理几乎相同。区别在于，webpack --watch它将创建一个实际的捆绑文件，并将其放置在您在config中指定的目录中。

这行不通

  "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 ."
  },