Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/23.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript React HMR找不到更新-在更改时刷新整个页面_Javascript_Reactjs_Webpack_Webpack Dev Server_Hot Module Replacement - Fatal编程技术网

Javascript React HMR找不到更新-在更改时刷新整个页面

Javascript React HMR找不到更新-在更改时刷新整个页面,javascript,reactjs,webpack,webpack-dev-server,hot-module-replacement,Javascript,Reactjs,Webpack,Webpack Dev Server,Hot Module Replacement,我在其他地方看到过一个问题(但不是真正有效的解决方案),当尝试使用react hot module reload时,当呈现方法中的内容发生更改时,整个页面都会刷新 client.js webpack.config.js 版本 "webpack": "^2.6.1", "webpack-dev-server": "^2.4.5" 在控制台中初次加载时,我看到[HMR]正在等待来自WDS的更新信号… 然后当保存更改时,页面刷新,然后在控制台中获得 [HMR]找不到更新。需要完全重新加载! [HMR

我在其他地方看到过一个问题(但不是真正有效的解决方案),当尝试使用react hot module reload时,当呈现方法中的内容发生更改时,整个页面都会刷新

client.js

webpack.config.js

版本

"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
在控制台中初次加载时,我看到
[HMR]正在等待来自WDS的更新信号…

然后当保存更改时,页面刷新,然后在控制台中获得

[HMR]找不到更新。需要完全重新加载! [HMR](可能是因为重新启动了Web包开发服务器)

如何让HMR注入JS而不重新加载页面?
//imports: react, {provider} from react-redux, {AppContainer} from react-hot-loader, other components

const Root = React.createClass({
  render () {
    return (
      <AppContainer>
        <Provider store={this.props.store}>
          <MainComponent>
            {/* bunch of other components */}
          </MainComponent>
        </Provider>
      </AppContainer>
    )
  }
})
"dev": "webpack-dev-server --env.development"
let isProd
module.exports = env => {
  isProd = env.production === true
  isDev = !isProd
  return {
    context: __dirname,
    entry: {
      app: [
        'react-hot-loader/patch',
        './js/client.js'
      ]
    },
    devtool: env.production ? 'source-map' : 'eval',
    // devtool: 'source-map',
    output: {
      path: path.join(__dirname, 'dist', 'js'),
      filename: 'bundle.js',
      // publicPath: '/dist/js',
      pathinfo: isDev
    },
    devServer: {
      publicPath: '/public/',
      historyApiFallback: true,
      hot: true,
      inline: true,
      port: 5888,
      proxy: {
        '/api': {
         target: 'http://localhost:6500'
        }
      }
    },
    resolve: {
      extensions: ['.js', '.json']
      // alias: {
      //   'google': path.resolve(__dirname, 'vendor', 'google.js')
      // }
    },
    stats: {
      colors: true,
      reasons: true,
      chunks: true
    },
    module: {
      rules: [
        {
          enforce: 'pre',
          test: /\.js$/,
          loader: 'eslint-loader',
          exclude: /node_modules/
        }
      ]
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
    ]
  }
}
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"