描述问题:
我在使用 react-hot-loader 这个插件,配置什么的,我都是按照教程配的,其中有过一些错误,然后我又找了些资料再改了改。现在虽然没有报错但是有警告信息没有更新。
我的代码:
webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: {
bundle: [
'webpack-dev-server/client?http://127.0.0.1:3000/',
'webpack/hot/only-dev-server',
path.resolve(__dirname, './assets/index')
]
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js',
publicPath: 'http://127.0.0.1:3000/dev/'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loaders: ['react-hot', 'babel-loader']
}
]
},
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), {
publicPath: config.output.publicPath,
hot: true,
stats: { colors: true },
headers: { 'Access-Control-Allow-Origin': '*'},
historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
if (err) console.log(err);
console.log('Webpack dev server listening at localhost:3000');
});
index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<div id="container"></div>
<script src="http://127.0.0.1:3000/dev/bundle.js"></script>
</body>
</html>
报错信息:
里面好像根艺个 unacceptedModules
参数有关
问题的描述就在上面了,大家有没有遇到过这种情况,怎么解决的?
---------------------------- 分割线 ------------------------------------
问题已经解决了
原来不能直接在 root component 文件中编辑某个组件的代码,需要把其中的组件代码分离出来,然后通过 require 的方法来引用组件。这样,在分离出去的组件文件中编辑,就可以实时刷新了。具体参数:react-hot-loader/docs/Troubleshooting.md