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

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

\n\n

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

\n\n

“使用支持 \xe2\x80\x9csafe write\xe2\x80\x9d\n的编辑器/IDE 请注意，许多编辑器支持 \xe2\x80\x9csafe write\xe2\x80\x9d 功能并默认启用它，这使得 dev服务器无法正确查看文件。\xe2\x80\x9cSafe write\xe2\x80\x9d 表示更改不会直接写入原始文件，而是写入临时文件，保存操作成功完成后，临时文件将被重命名并替换原始文件。这行为会导致文件观察器丢失轨道，因为原始文件已被删除。为了防止此问题，您必须在编辑器中禁用 \xe2\x80\x9csafe write\xe2\x80\x9d 功能。

\n\n

VIM - set :set backupcopy=yes (参见文档)\nIntelliJ - 设置 \xe2\x96\xb6\xef\xb8\x8e 系统设置 \xe2\x96\xb6\xef\xb8\x8e 同步 \xe2\x96\xb6\ xef\xb8\x8e 禁用安全写入（在各种 IntelliJ IDE 中可能有所不同，但您仍然可以使用搜索功能）”

\n