React-hot-loader如何热替换功能，我的报错，代码如下

#1

webpack.config.js 代码如下：

var webpack = require('webpack');
var path = require('path');
var publicPath = 'http://127.0.0.1:3000/';
module.exports = {
  // 页面入口的文件
  //entry: "./src/main.js",
  entry: [
    'webpack-dev-server/client?http://127.0.0.1:3000', 
    'webpack/hot/only-dev-server',
    './src/main.js' 
  ],
  // 打包后 页面输出的文件目录
  output: {
	path: path.join(__dirname, './build'),
    filename: "bundle.js",
	publicPath: publicPath
  },
  module: {
	// 加载器
    loaders: [
	  //.css 文件使用 style-loader 和 css-loader 来处理
      { test: /\.css$/, loader: 'style-loader!css-loader' },

	  //.js 文件使用 jsx-loader 来编译处理
	  { 
		test: [/\.js$/, /\.jsx$/], 
		loader: 'react-hot!jsx?harmony',
		exclude: '/node_modules/'
	  }
    ]
  },
  resolve: {
    extensions: ['', '.coffee', '.js', '.jsx']
  },
  plugins: [
	new webpack.HotModuleReplacementPlugin(),
	new webpack.NoErrorsPlugin()
  ]
}

server.js代码如下：

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

new WebpackDevServer(webpack(config), {
  hot: true,
  historyApiFallback: true
}).listen(3000, '127.0.0.1', function (err, result) {
  if (err) {
    console.log(err);
  }
  console.log('Listening at localhost:3000');
});
main.js 和 module1.js是在同一个目录下，main.js代码如下：
var modules1 = require("./module1");
console.log(modules1);

module1.js代码如下：
console.log(22);

我是想通过热替换 不断的修改 module1.js代码 来看看是否能实时刷新数据的测试，但是会报如下错误：

[WDS] Hot Module Replacement enabled.
2bundle.js:591 [WDS] App updated. Recompiling...
bundle.js:637 [WDS] App hot update...
bundle.js:9367 [HMR] Checking for updates on the server...
bundle.js:9392 [HMR] The following modules couldn't be hot updated: (They would need a full reload!)
bundle.js:9394 [HMR]  - 64
#2

这个错误是在于你入口文件那里，不是在配置项。
React.render函数必须放在入口文件那里，而不能在组件里

#3

能不能加下你qq 好聊点 直接聊~ 是否可以 我的qq是：807287699

#4

我现在入口文件 main.js代码改成如下：

var React = require('react');
var Hello = require('./Hello');
React.render(<Hello name="Nate" />, document.body);

Hello.js代码改成如下：
"use strict"
var React = require('react');
class Hello extends React.Component {
  render() {
    return (
      <h1>Hello {this.props.name}!</h1>
    );
  }
}

配置不变 运行下node server.js后 控制台如下打印：

[HMR] Waiting for update signal from WDS...
bundle.js:9537 Download the React DevTools for a better development experience: https://fb.me/react-devtools
Uncaught TypeError: type.toUpperCase is not a function
[WDS] Hot Module Replacement enabled.

这是什么错误？

#5

需要export出hello组件才行

#6

你导出那个模块了么？
module.exports = Hello

#7

恩 对 我导出后 当我修改Hello。js 文件后 保存后 还是会报错呢；报错如下：
The following modules couldn’t be hot updated: (They would need a full reload!)

#8

你是修改的是这个么？
<Hello name="修改" />
一切修改都要在模块内部噢
所以你直接修改Hello组件的Render的字符串应该可以看得到效果了呀。

render(){
    return <div>Fuxxxxxk{this.props.name}</div>
}
#9

修改是hello.js内部的 报错了 为了方便 我把文件上传到了github上 帮帮忙 帮我看看 初学者 不懂 https://github.com/tugenhua0707/webpack-hot-loader

#10

修改是hello.js内部的 报错了 为了方便 我把文件上传到了github上 帮帮忙 帮我看看 初学者 不懂 https://github.com/tugenhua0707/webpack-hot-loader

#11

这个不错报错，不是每次修改都回自动热加载的，有些更新是需要自己手动刷新浏览器的,我是通过这个教程来学习的
http://survivejs.com/webpack_react/webpack_and_react/

#12

你的html里面的静态资源的地址要从dev-server里面取呀！

它的原理是大致是这样的，你的静态资源从webpack-dev-server里取，网页和dev-sever是通过websocket进行通信。当你的模块修改了，webpack-dev-server就会通知你的网页，从而进行热替代。

你的代码里的Html是的资源是纯静态的，你说它怎么进行模块修改？

#13

大致就是

<script src="localhost:3000/build/bundle.js"></script>

还要引入一个script用来建立通信的js，多搜索一下，很容易就找到的。

<script src="http://localhost:3000/webpack-dev-server.js"></script>

这里要注意webpack.config里的output的publicPath的路径，如果配置不当，就取不到文件了。

还有就是React都需要require才能生效，不能单纯通过引入react.min.js。

#14

能提供一个demo地址不？

#15
这个东西是不是要手动加入，我搜了n多文章每一个说这一点的。
#16

不知道题主解决没有，今天捣鼓这个的时候也遇到这个问题，看了下题主git 地址的代码， 应该是第一层这个 “<Hello name="Nate" />” 变量的问题， 在这个外面再包一层组件， 不要加这种变量，在第二层组件里面加变量，就可以热替换了。（我是这么解决的）

#17

请问 能否贴下代码~

#18

(https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md)
这里有can’t hot reload的一些解决方法，你看看能不能解决

#19

突然想问为什么不用 babel-loader

#20

修改webpack.config.js,
webpack/hot/only-dev-server -> webpack/hot/dev-server