Electron/React 应用程序中的热重载

Question

热重载似乎不再起作用。我不确定我的设置会发生什么变化，事实上据我所知，git 日志显示，什么都没有改变。

无论如何，我正在尝试重新加载 CSS 和 Reacts .jsx 文件。

目前，我在另一个控制台选项卡中运行npm run watch，然后运行npm run start。应用程序启动，但不会重新加载文件中的任何更改。我的 package.json 如下所示：

{
  ...
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env ENVIRONMENT=DEV electron main.js",
    "watch": "webpack-dev-server --hot --inline",
    "build": "webpack"
  },
  "dependencies": {
    "axios": "^0.15.2",
    "babel": "^6.5.2",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-class-properties": "^6.19.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.2.0",
    "cross-env": "^3.1.1",
    "electron": "^1.3.4",
    "electron-prebuilt": "^1.4.2",
    "json-loader": "^0.5.4",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-router": "^2.8.1",
    "react-tap-event-plugin": "^1.0.0",
    "semantic-ui-react": "^0.56.13",
    "socket.io-client": "^1.5.0",
    "store": "^1.3.20",
    "webpack": "^1.13.3"
  },
  "devDependencies": {
    "css-loader": "^0.25.0",
    "style-loader": "^0.13.1",
    "webpack-dev-server": "^1.16.2"
  }
}

省略了一些不必要的依赖。我的webpack.config.js 如下所示：

var path = require("path");

module.exports = {
  entry: path.resolve(__dirname, "app/index.jsx"),
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: 'http://localhost:8080/build/',
    filename: 'app.js'
  },
  module: {
    loaders: [
        {
            test: /\.jsx?$/,
            loader: 'babel',
            exclude: /node_modules/
        },
        { 
            test: /\.css$/,
            loader: "style-loader!css-loader"
        },
        { 
            test: /\.json$/, 
            loader: "json-loader"
        }
    ]
  }    
};

为了在此设置中进行热重载工作，我缺少什么？

编辑： 如您所见，入口点定义为index.jsx。这个文件非常简单，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './styles.css'
import routes from './router.jsx'

ReactDOM.render(
  routes,
  document.getElementById('app')
);

每当我对此文件进行更改时，都会触发热重载。此外，此处导入的文件（如 styles.css）的更改也会重新加载。问题是，我的所有组件显然都导入了我的路由器。因此，对我的组件的任何更改都不会热重载。我怎样才能让它正常工作？

Answer 1

我用成webpack.config.js这个选项：

var path = require('path');
var webpack = require('webpack');

module.exports = {
  name: 'client',
  entry: './client.js',
  output: {
    path: __dirname, filename: 'bundle.js'
  },
  module: {
    loaders: [
      { 
        test: /\.jsx?$/,         // Match both .js and .jsx files
        exclude: /node_modules/, 
        loader: "babel-loader", 
        query:
        {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  devServer: {
    historyApiFallback: true
  },
}

并进入package.json这个选项：

  "scripts": {
    "start": "npm run dev",
    "webpack": "webpack --progress --colors",
    "dev": "webpack-dev-server --devtool eval --progress --colors --inline"
  },

Answer 2

有时组件不知道如何自行热重载。您可以尝试添加到您的index.jsx：

if (module.hot) {
  module.hot.accept()
}

如果这不起作用，我建议依靠react-hot-loader。

您必须安装 webpack-hot-middleware，并更改您的 entry 以包含它。

entry: [
  'webpack-hot-middleware/client',
  path.resolve(__dirname, 'build')
]

鉴于您使用的是--hot 选项，我认为您不需要添加HotModuleReplacementPlugin，但我可能错了。

还有 v3 的 react-hot loader 即将发布，您可以研究一下，但我认为如果您使用的是 Webpack 1，最好保持稳定版本。

您还可以查看完整的 react-transform-boilerplate 存储库，它为使用 Webpack 进行热重载提供了完整的工作配置。

Answer 3

如果您使用 WebStorm 或其他支持“SafeWrite”的编辑器，您可能需要禁用它。

https://webpack.github.io/docs/webpack-dev-server.html

“使用支持“安全写入”的编辑器/IDE 请注意，许多编辑器支持“安全写入”功能并默认启用它，这使得开发服务器无法正确观看文件。 “安全写入”是指更改不是直接写入原始文件，而是写入临时文件，当保存操作成功完成时，临时文件被重命名并替换原始文件。此行为会导致文件观察程序丢失轨道，因为原始文件已被删除。为了防止这个问题，你必须在你的编辑器中禁用“安全写入”功能。

VIM - 设置 :set backupcopy=yes（见文档） IntelliJ - 设置 ▶︎ 系统设置 ▶︎ 同步 ▶︎ 禁用安全写入（可能在各种 IntelliJ IDE 中有所不同，但您仍然可以使用搜索功能）”