Question

我试图让热重装在Electron工作，但由于某些原因，它总是令人耳目一新。当我在浏览器中测试它时，它可以很好地工作。

我正在尝试为用户创建一个热重新加载的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>

切入点：

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)
  });
}

当我在项目目录中的bash终端中执行webpack-dev-server并转到localhost：8080时，它可以正常工作。但是通过child_process执行webpack-dev-server使得它只能在localhost：8080上的电子和浏览器中进行实时重新加载。

任何见解？

Answer 1

现在有效，没有改变任何东西。不明白为什么：耸耸肩：

Electron的热重新加载，在浏览器中工作，但只能在Electron中重新加载

1 个答案: