0

我正在使用 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

服务器.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"],
  ]
}

"react-hot-loader": "^3.0.0-beta.6",

"webpack": "^1.13.3",

"webpack-bundle-tracker": "^0.1.0",

"webpack-dev-server": "^1.16.2",

“webpack-loader”：“^0.0.1”

应用程序.jsx

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

1 回答 1

0

对于 react-hot-loader v3，您需要显式使用 webpack 的热模块替换 api，如此处文档中所述（也由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')
    );
  });
}
于 2017-07-24T15:12:40.933 回答