为什么没有调用 module.hot.accept 处理程序？

Question

我在我的项目中设置了 HMR，它对于我的大多数应用程序（电子、webpack、react）都运行良好。

唯一的问题： module.hot.accept 回调永远不会被调用，因此对于热替换我的数据存储，它不起作用。我实际上想知道 HMR 适用于 React 等，即使没有调用处理程序。有任何想法吗？

当我更改文件时，日志看起来是正确的：

[WDS] App updated. Recompiling...
09:41:43.883 index.js?69b4:3671 [WDS] App updated. Recompiling...
09:41:46.703 index.js?69b4:3671 [WDS] Warnings while compiling.
...
09:41:46.706 index.js?69b4:3671 [WDS] App hot update...
09:41:46.708 index.js?69b4:3671 [HMR] Checking for updates on the server...
09:41:47.095 index.js?69b4:3671 [HMR] Updated modules:
09:41:47.097 index.js?69b4:3671 [HMR]  - ./app/stores/UiStore.js
09:41:47.098 index.js?69b4:3671 [HMR] App is up to date.

// main.js:
...
import UiStore from './stores/UiStore'
import App from './App'

   if (module.hot) {
      // @ts-ignore
      module.hot.accept('./stores/UiStore', () => {
        console.log('This is never called, why??')
        renderApp(App, createStores(getSnapshot(dbStore), getSnapshot(uiStore)))
      })
    
      // @ts-ignore
      module.hot.accept('./App', () => {
        console.log('This is never called, why??')
        renderApp(App, dbStore, uiStore)
      })
    }

// webpack.config.js:
const path = require('path')
const webpack = require('webpack')

/**
 * @type webpack.Configuration
 */
const config = {
  devtool: 'eval-cheap-source-map',
  entry: {
    main: [
      '@babel/polyfill',
      './app/main.js'
    ],
    worker: [
      '@babel/polyfill',
      './app/worker.js'
    ],
    pdfexport: [
      '@babel/polyfill',
      './app/pdfExport.js'
    ]
  },
  mode: 'development',
  output: {
    filename: '[name]-bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },

  module: {
    rules: [
      {
        test: /\.node$/,
        use: 'node-loader'
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_compontents)/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(js)$/,
        include: /node_modules/
      }
    ]
  },

  plugins: [new webpack.HotModuleReplacementPlugin()],

  devServer: {
    host: 'localhost',
    port: 3000,
    historyApiFallback: true,
    hot: true
  },
  target: 'electron-renderer'
}

module.exports = config

// package.json:
"scripts": {
    "start-dev": "cross-env NODE_ENV=development webpack-dev-server",
...
"devDependencies": {
    "@hot-loader/react-dom": "^17.0.1",
    "react-hot-loader": "^4.13.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2",
    "webpack-node-externals": "^1.7.2",

Answer 1

尝试禁用devServer.liveReload