Electron/React應用程序中的熱重新加載

Question

熱重新加載似乎不再有效。我不確定在我的設置中會發生什麼變化，事實上，據我所知，git日誌顯示，沒有任何變化。

無論如何，我試圖重新加載CSS和反應.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'的編輯器，您可能需要禁用它。

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

安全寫‘ 注意，很多編輯器都支持‘安全寫「與編輯/ IDE的支持工作’’功能，並已將其默認啓用，這使得開發服務器無法正確觀看的文件。「安全寫「意味着更改不會直接寫入原始文件，而是寫入臨時文件，而保存操作成功完成後，該文件將被重命名並替換原始文件。此行爲會導致文件觀察器由於原始文件被刪除而丟失曲目。爲防止出現這個問題，您必須在編輯器中禁用「安全寫入」功能。

VIM - 設置：設置backupcopy = yes（參見文檔） IntelliJ - 設置▶︎系統設置▶︎同步▶︎禁用安全寫入（可能在各種IntelliJ IDE中不同，但仍可以使用搜索功能）「

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，並且你可以看看，但我認爲這是對你更好，如果你留在穩定版本給您正在使用的WebPack 1

您也可以結帳完整的react-transform-boilerplate回購，它提供了一個完整的工作配置與Webpack熱重新加載。

Answer 3

我使用到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" 
    },