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

时间:2016-11-28 12:29:32

标签: javascript reactjs webpack webpack-dev-server react-hot-loader

我正在使用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"],
  ]
}
  

" 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"

App.jsx

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

1 个答案:

答案 0 :(得分:0)

对于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')
    );
  });
}