React Hot Loader未按預期更新

我正在使用react-hot-loader和webpack。我還使用webpack-dev-server和一個快速後端。React Hot Loader未按預期更新

這是發展我相關的WebPack配置：

var frontendConfig = config({ 
    entry: [ 
    './src/client/app.js', 
    'webpack-dev-server/client?http://localhost:3000', 
    'webpack/hot/dev-server' 
    ], 
    output: { 
    path: targetDir, 
    publicPath: PROD ? '/build/assets/' : 'http://localhost:3000/build/assets/' , 
    filename: 'app.js' 
    }, 
    module: { 
    loaders: [ 
     {test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: PROD ? [babelLoader] : ['react-hot', babelLoader] } 
    ] 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin({ quiet: true }) 
    ] 
});

這個配置我開始的WebPack和的WebPack-DEV-服務器

gulp.task('frontend-watch', function() { 
    new WebpackDevServer(webpack(frontendConfig), { 
     publicPath: frontendConfig.output.publicPath, 
     hot: true, 
     stats: { colors: true } 
    }).listen(3000, 'localhost', function (err, result) { 
     if(err) { 
     console.log(err); 
     } 
     else { 
     console.log('webpack dev server listening at localhost:3000'); 
     } 
    }); 
});

這樣的WebPack-DEV-服務器在本地主機上運行： 3000並從webpack監視器（現在不再寫入文件系統）接收app.js。

我Express服務器作爲後臺/ API並具有以下配置：

var express = require('express'); 

// proxy for react-hot-loader in dev mode 
var httpProxy = require('http-proxy'); 
var proxy = httpProxy.createProxyServer({ 
    changeOrigin: true, 
    ws: true 
}); 

var isProduction = process.env.NODE_ENV === 'production'; 

// It is important to catch any errors from the proxy or the 
// server will crash. An example of this is connecting to the 
// server when webpack is bundling 
proxy.on('error', function(e) { 
    console.log('Could not connect to proxy, please try again...'); 
}); 

module.exports = function (app) { 

    // We only want to run the workflow when not in production 
    if (!isProduction) { 
    console.log('setting up proxy for webpack-dev-server..'); 
    // Any requests to localhost:4200/build is proxied 
    // to webpack-dev-server 
    app.all('assets/app.js', function (req, res) { 

     proxy.web(req, res, { 
      target: 'http://localhost:3000' 
     }); 
     console.log('request proxied to webpack-dev!'); 
    }); 
    } 

    var server = require('http').createServer(app); 

    app.use(express.static(homeDirectory + '/build')); 
    app.use(express.static(homeDirectory + '/files')); 

    server.listen(4200); 
};

這一切都很好，到目前爲止，爲app.js的代理工作，我看到在瀏覽器控制檯全成熱的更新消息：

現在

，而它看起來罰款並不如我所料工作：

當我更改組件的render（）方法時，它按照假設更新，但是當我更改輔助方法（在render（）中使用）時，我沒有得到任何熱更新。這是正常的嗎？

另一件事，我的錯誤，如果我這樣的工作，並在某些時候做一個「硬」的瀏覽器重裝，我所做的所有更改恢復到了我開始使用我的webpack-dev-server的時候 - 它們之間的所有熱點更新都沒有以某種方式持續下去。這是否正常？我希望我放鬆我的狀態，但不會對代碼做任何更改。這可能與我的app.js沒有寫入文件系統有關。

來源

2015-09-04 tmaximini

對於你的問題＃2，這是不正常的，我有了HMR工作可以在這裏找到一個模板回購和它工作得很好https://github.com/briandipalma/wp-r-template

來源

2015-09-04 20:55:56

對於問題＃1，通常呈現方式顯示或格式的數據，不要從某處抓住它。但是，如果你需要格式化數據，使用功能組件的外

父組件將調用下面只要您檢索

<ChildComponent price={this.state.price}

ChildComponent的渲染功能將使用道具（或更好的參數價格功能）。請記住：React的全部內容是成分和數據流

return (
    <div>{this.props.price}</div> 
);

來源

2016-03-24 18:05:05

React Hot Loader未按預期更新

回答

相關問題