反应热加载程序不更新更改-Java 学习之路

我正在使用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');
});

and my .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 回答

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

回复于 2024-05-01T15:59:05+08:00

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

1 回答

相关问题