反应热载入程序没有更新更改
问题描述:
我使用react-hot-loader v3,但它不工作。它侦听在服务器上更新,但不显示更改,而不是我得到警告的反应热载入程序没有更新更改
日志申请-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"],
]
}
“反应热装载机”: “^ 3.0.0-beta.6”,
“webpack”:“^ 1.13.3”,
“的WebPack束跟踪器”: “^ 0.1.0”,
“的WebPack-DEV-服务器”: “^ 1.16.2”,
“的WebPack装载机”: “^ 0.0.1”
App.jsx
render(<Change />, document.getElementById('app'))
答
对于反应热装载机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')
);
});
}
https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md#the-following-modules-couldnt-be-hot - 更新 - 他们-潜在需求 - 一个全重装 – Izhaki