0
私はエレクトロンでホットリロードをしようとしていますが、何らかの理由で常にリフレッシュしています。私はブラウザでそれをテストするとき、それは完全にうまく動作します。エレクトロンのホットリロードは、ブラウザで動作しますが、電子のライブリロードのみです。
私は、ユーザーのためのホットリロードを持つIDEを作成しようとしています。私は、メインプロセスで以下の関数ごとにchild_process.execを使用しています。
function simulator(root) {
let spawn = exec('webpack-dev-server', {
cwd: path.join(__dirname, '../lib/temp/new-project')
}, (err, stdout, stderr) => {
let child = new BrowserWindow({
width: 800,
height: 600
});
child.loadURL('http://localhost:8080');
child.toggleDevTools();
})
}
私のwebpack設定は、反応のためのホットリロードに関するwebpack 2のチュートリアルのコピーです。
const { resolve } = require('path');
const webpack = require('webpack');
module.exports = {
entry: [
'react-hot-loader/patch',
// activate HMR for React
'webpack-dev-server/client?http://localhost:8080',
// bundle the client for webpack-dev-server
// and connect to the provided endpoint
'webpack/hot/only-dev-server',
// bundle the client for hot reloading
// only- means to only hot reload for successful updates
'./index.js'
// the entry point of our app
],
output: {
filename: 'bundle.js',
// the output bundle
path: resolve(__dirname, 'dist'),
publicPath: 'http://localhost:8080/'
// necessary for HMR to know where to load the hot update chunks
},
context: resolve(__dirname, 'src'),
devtool: 'inline-source-map',
devServer: {
hot: true,
// enable HMR on the server
contentBase: resolve(__dirname, 'dist'),
// match the output path
publicPath: 'http://localhost:8080/',
// match the output `publicPath`
// port: 8081
},
module: {
rules: [
{
test: /\.js$/,
use: [
'babel-loader',
],
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader?modules',
'postcss-loader',
],
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// enable HMR globally
new webpack.NamedModulesPlugin(),
// prints more readable module names in the browser console on HMR updates
],
};
Index.htmlと：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script type='text/javascript' src='http://localhost:8080/bundle.js'></script>
</body>
</html>
エントリポイント：私はプロジェクトディレクトリに私のbashターミナルでのWebPACK-devのサーバーを実行して、ローカルホストに行く
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
// AppContainer is a necessary wrapper component for HMR
import App from './components/App';
const render = (Component) => {
ReactDOM.render(
<AppContainer>
<Component/>
</AppContainer>,
document.getElementById('root')
);
};
render(App);
// Hot Module Replacement API
if (module.hot) {
module.hot.accept('./components/App',() => {
render(App)
});
}
：8080それはうまく動作します。しかし、child_processを通してwebpack-dev-serverを実行すると、localhost：8080上で電子とブラウザの両方でライブリロードしかできません。
洞察？