Question

我已经克隆了this repo，用于启用热重新加载的reactjs开发。它的工作正常，问题是，我想在热电子重载中运行这个应用程序。所以在我的main.js文件中，我指出了reactsjs index.html文件。它显示空白页面。虽然我可以看到标签内容＆＃34;欢迎回应＆＃34;在电子窗口上，这意味着它指向正确，但没有内容显示。

我发现电子投掷错误

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替换为带有--watch param的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 ."
  },

Answer 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" ]
}

Reactjs用电子热重新加载

2 个答案: