Question

我正在使用react-hot-loader v3，但它无法正常工作。它会监听服务器上的更新但不显示更改，而是收到警告

log-apply-result.js？d762：11 [HMR]以下模块不可能热更新:(他们需要完全重装！）

以下是我的webpack配置

webpack.local.config.js

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

var config = require('./webpack.base.config.js')
var localSettings = require('./webpack.local-settings.js')

var ip = localSettings.ip

config.devtool = "#eval-source-map"

config.ip = ip

// Use webpack dev server
config.entry = {
  App: [
    'webpack-dev-server/client?http://' + ip + ':3000',
    'webpack/hot/only-dev-server',
    'react-hot-loader/patch',
    './reactjs/App',
  ]
}

// override django's STATIC_URL for webpack bundles
config.output.publicPath = 'http://' + ip + ':3000' + '/assets/bundles/'

// Add HotModuleReplacementPlugin and BundleTracker plugins
config.plugins = config.plugins.concat([
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoErrorsPlugin(),
  new BundleTracker({filename: './webpack-stats-local.json'}),
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('development'),
      'BASE_API_URL': JSON.stringify('http://' + ip + ':8000/api/v1/'),
  }}),

])

// Add a loader for JSX files with react-hot enabled
config.module.loaders.push(
  { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'] }
)

module.exports = config

server.js

var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var config = require('./webpack.local.config')

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  inline: true,
  historyApiFallback: true,
  quiet: false,
}).listen(3000, config.ip, function (err) {
  if (err) {
    console.log(err);
  }

  console.log('Listening at ' + config.ip + ':3000');
});

和我的.babelrc

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": [
    ["react-hot-loader/babel", "transform-decorators-legacy"],
  ]
}

＆＃34; react-hot-loader＆＃34;：＆＃34; ^ 3.0.0-beta.6＆＃34;，

＆＃34; webpack＆＃34;：＆＃34; ^ 1.13.3＆＃34;，

＆＃34; webpack-bundle-tracker＆＃34;：＆＃34; ^ 0.1.0＆＃34;，

＆＃34; webpack-dev-server＆＃34;：＆＃34; ^ 1.16.2＆＃34;，

＆＃34; webpack-loader＆＃34;：＆＃34; ^ 0.0.1＆＃34;

App.jsx

render(<Change />, document.getElementById('app'))

Answer 1

对于react-hot-loader v3，您需要明确使用webpack的热模块替换api，如文档here中所述（也由Izhaki发布）。

例如，

import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from './containers/App'

ReactDOM.render(
  <AppContainer>
    <App/>
  </AppContainer>,
  document.getElementById('root')
);

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./containers/App', () => {
    const NextApp = require('./containers/App').default;
    ReactDOM.render(
      <AppContainer>
        <NextApp/>
      </AppContainer>,
      document.getElementById('root')
    );
  });
}

反应热加载程序不更新更改

1 个答案: