让webpack热点更新在我的同构web应用程序中正常工作
我正在创build一个节点/expression后端和反应前端的Web应用程序。 我（我想）大部分已经启动并运行了，但让浏览器执行热点刷新的最后一步并不像预期的那样工作。 我会尽力在这里发布所有相关的设置。 请让我知道，如果你需要别的什么来找出我犯了什么错误：
我用node ./server/index.js启动我的应用程序
webpack.config.js var path = require（'path'）; var webpack = require（'webpack'）;
let webpackConfig = { name: 'server', output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/dist/', }, resolve: { extensions: [ '', '.js', '.jsx', '.json' ] }, module: { loaders: [ { test: /\.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/, query:{ presets: ['es2015', 'react', 'stage-2'] } }, { test: /\.json$/, loader: 'json-loader' } ] }, entry: [ 'webpack-hot-middleware/client', './app/client/client.jsx' ], plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }), new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ] }; export default webpackConfig;
index.js只包括'babel-register'和'server.js'
server / server.js从'webpack'导入webpack; 从'../webpack.config'导入webpackConfig; 从'webpack-dev-middleware'导入webpackDevMiddleware; 从'webpack-hot-middleware'导入webpackHotMiddleware;
import express from 'express'; const app = express(); const renderPage = () => { return ` <!doctype html> <html> <head> <title>Brewing Day</title> <meta charset='utf-8'> </head> <body> <h1>Hello from server.js!!</h1> <div id='root'></div> <script src='/dist/bundle.js'></script> </body> </html> `; }; const compiler = webpack(webpackConfig); app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath }) ); app.use(webpackHotMiddleware(compiler)); app.use((req, res, next) => { res.status(200).end(renderPage()); }); const server = app.listen(3005, () => { const host = server.address().address; const port = server.address().port; console.log(`Listening at http://${host}:${port}`); }) export default server;
而app / client / client.jsx是webpack config中的入口点：
import React from 'react'; import ReactDOM from 'react-dom'; import Application from '../components/application.jsx'; window.addEventListener('load', () => { ReactDOM.render(<Application />, document.getElementById('root') ); });
在控制台中，当我启动它时，它会列出以下行：
webpack built cc1194a11614a3ba54a3 in 730ms
当我对包含rect组件的client.jsx或application.jsx进行更改时，在控制台中会出现两行新行：
webpack building... webpack built 8d340a8853d3cfe9478d in 195ms
到现在为止还挺好！
但是，在浏览器中，它不会更新并在控制台中发出以下警告：
[HMR] The following modules couldn't be hot updated: (Full reload needed) This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details. [HMR] - ./app/components/application.jsx
我试着随机添加module.hot.accept()到application.jsx 。 这得到了摆脱警告，但没有更新没有击中F5和重新加载浏览器。
任何想法，我在这里失踪？ 我已经看到另一个例子，几乎像我的设置，这里没有任何module.hot.accept()调用任何地方，但我没有看到我的设置与其他设置不同。
任何和所有的帮助将不胜感激。
经过大量的挖掘，我find了我的问题的答案。 我是这样创build我的基础反应“类”：
class Application = () => { return ( <div id="maincontent"> <MainMenu /> <ScreenContents /> </div> ) };
即使被React支持，这也不支持HMR。
我必须像这样明确地创build我的类：
class Application extends React.Component{ render (){ return ( <div id="maincontent"> <MainMenu /> <ScreenContents /> </div> ); } };
然后HMR工作得很好:)
编辑：根据@akoskm评论，似乎webpackconfiguration文件中的configuration文件也可能是一个问题。 所以这里是相关的部分：
巴贝尔设置
var babelSettings = { presets: ['react', 'es2015', 'stage-2'], env: { development: { plugins: [ ['react-transform', { transforms: [ { transform: 'react-transform-hmr', imports: [ 'react' ], locals: [ 'module' ] } ] }] ] } } };
预设和环境的东西可能并不完全一样，但react-transform东西是这里的重要部分。
装载机
{ test: /\.(js|jsx)$/, loaders: ['babel?' + JSON.stringify(babelSettings)], exclude: /node_modules/ }