Question

我已按照以下指南进行操作：

但我似乎无法让HMR为Electron工作。这些是我在应用一些更改时得到的日志：

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

这是我的.babelrc配置：

{
  "presets": [
    ["es2015", {"modules": false}],
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

我的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>

我不知道它是否有事可做，但我使用的是打字稿。欢迎任何帮助。谢谢！

HMR与电子和反应？

0 个答案: