Javascript HMR与电子反应？_Javascript_Reactjs_Webpack_Electron_Webpack Hmr

Javascript HMR与电子反应？

javascript reactjs webpack electron

Javascript HMR与电子反应？,javascript,reactjs,webpack,electron,webpack-hmr,Javascript,Reactjs,Webpack,Electron,Webpack Hmr,我遵循了以下指南：但我似乎无法使HMR对电子起作用。以下是我在应用某些更改时获得的日志： [WDS] App updated. Recompiling... [WDS] App hot update... [HMR] Checking for updates on the server... [HMR] Cannot find update. Need to do a full reload! [HMR] (Probably because of restarting the web

我遵循了以下指南：

但我似乎无法使HMR对电子起作用。以下是我在应用某些更改时获得的日志：

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Cannot find update. Need to do a full reload!
[HMR] (Probably because of restarting the webpack-dev-server)
[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.

这是我的

webpack.config.js

：

const webpack = require('webpack')
const { join, resolve } = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  context: resolve(__dirname, 'app'),
  entry: [
    'babel-polyfill',
    'react-hot-loader/patch',
    './index.tsx'
  ],
  output: {
    filename: './bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
        test: /\.(js|ts|tsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }, {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      }, {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [{
              loader: 'css-loader'
            }, {
              loader: 'sass-loader'
            }
          ]
        }),
        exclude: /node_modules/
      }]
  },
  target: 'electron',
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.jsx', 'scss']
  },
  devtool: 'source-map',
  plugins: [
    new ExtractTextPlugin('bundle.css')
  ]
}

这是我的开始脚本：

"watch": "./node_modules/.bin/webpack-dev-server --hot --history-api-fallback"

这是我的根组件：

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { Provider, Store } from 'react-redux'

import App from './App'
import reducer from './reducers'
import configureStore from './store/configureStore'

import './stylesheets/index.scss'

const store: Store<any> = configureStore()

const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Provider store={store}>
        <Component/>
      </Provider>
    </AppContainer>,
    document.getElementById('root')
  )
}

render(App)

if (module['hot']) {
  module['hot'].accept('./App', () => {
    render(App)
  })
}

还有我的

index.html

：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Markers - Notes for students</title>
    <link href="http://localhost:8080/bundle.css" rel="stylesheet"/>
  </head>
  <body>
    <div id="root"></div>
    <script src="http://localhost:8080/bundle.js"></script>
  </body>
</html>


标记-学生须知

我不知道这是否有什么关系，但我正在使用typescript。欢迎任何帮助。谢谢

对我来说，react hot loader是webpack配置中插件的一部分，而不是babel配置的一部分。对我来说，react hot loader是webpack配置中插件的一部分，而不是babel配置的一部分

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Markers - Notes for students</title>
    <link href="http://localhost:8080/bundle.css" rel="stylesheet"/>
  </head>
  <body>
    <div id="root"></div>
    <script src="http://localhost:8080/bundle.js"></script>
  </body>
</html>