在我的同构网络应用程序中使webpack热更新正常工作 [英] Getting webpack hot updating to work correctly in my isomorphic web app
问题描述
我正在创建一个带有node / express后端和反应前端的webapp。我想（我认为）大部分的运行，但是让浏览器执行热刷新的最后一步不按预期工作。我会尝试在这里发布所有相关设置。请让我知道，如果您还需要任何其他事情来确定我犯了哪些错误：
I'm creating a webapp with a node/express backend and a react frontend. I got (I think) most of it up and running, but the last step of getting the browser to perform a hot refresh does not work as intended. I'll try to post all the relevant setup here. Please let me know if you require anything else to find out where I have done a mistake:
我使用节点启动我的应用程序./server /index.js
webpack.config.js
var path = require（'path' ）;
var webpack = require（'webpack'）;
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'
index.js just include 'babel-register' and 'server.js'
server / server.js
从webpack导入webpack;
从'../webpack.config'导入webpackConfig;
从'webpack-dev-middleware'导入webpackDevMiddleware;
从'webpack-hot-middleware'导入webpackHotMiddleware;
server/server.js import webpack from 'webpack'; import webpackConfig from '../webpack.config'; import webpackDevMiddleware from 'webpack-dev-middleware'; import webpackHotMiddleware from 'webpack-hot-middleware';
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：
And app/client/client.jsx that is the entrypoint in the 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')
);
});
在控制台中，当我启动它时，它列出以下行：
In the console, when I fire it up, it lists the following line:
webpack built cc1194a11614a3ba54a3 in 730ms
当我修改例如包含rect组件的 client.jsx 或 application.jsx 我的控制台中有两条新线：
When I do a change to for example client.jsx or application.jsx that contains the rect component, I get two new lines in my console:
webpack building...
webpack built 8d340a8853d3cfe9478d in 195ms
到目前为止，这么好！
然而，浏览器，它不更新，并在控制台中发出以下警告：
However, in the browser, it does not update and gives the following warning in console:
[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（） to application.jsx 。这样就可以摆脱警告，但是不用再按F5并重新加载浏览器，仍然没有更新。
I tried randomly adding module.hot.accept() to application.jsx. That get's rid of the warnings, but still no update without hitting F5 and reloading the browser.
我已经看到另外一个例子，就像我的设置一样，在这里工作，没有任何一个 module.hot.accept（）调用，但是我看不到我的设置与其他设置。
Any idea what I'm missing here? I have seen another example set up almost like mine, where this works without any module.hot.accept() calls anywhere, but I fail to see where my setup differ from the other setup.
任何和所有的帮助将不胜感激。
Any and all help will be appreciated.
推荐答案
经过很多的挖掘，我找到了我的问题的答案。我正在创建我的基地React类：
After a lot of digging around, I found the answer to my problem. I was creating my base React "class" like this:
class Application = () => {
return (
<div id="maincontent">
<MainMenu />
<ScreenContents />
</div>
)
};
即使支持React，HMR也不受支持。
This is unsupported for HMR, even if it's supported by React.
我必须明确地创建我的类：
I had to create my class explicitly like this:
class Application extends React.Component{
render (){
return (
<div id="maincontent">
<MainMenu />
<ScreenContents />
</div>
);
}
};
然后HMR工作正常：）
And then HMR works just fine :)
编辑：根据@akoskm评论，似乎webpack配置文件中的babel配置也可能是一个问题。所以这里是相关的部分：
According to @akoskm comments, it seems that the babel configuration in the webpack configuration file might be an issue as well. So here are the relevant parts:
var babelSettings = {
presets: ['react', 'es2015', 'stage-2'],
env: {
development: {
plugins: [
['react-transform', {
transforms: [
{
transform: 'react-transform-hmr',
imports: [ 'react' ],
locals: [ 'module' ]
}
]
}]
]
}
}
};
预设和环境的东西可能与您完全一样，但
加载器
The presets and environment stuff might not be exactly the same for you, but the react-transform stuff is the important part here.
{
test: /\.(js|jsx)$/,
loaders: ['babel?' + JSON.stringify(babelSettings)],
exclude: /node_modules/
}
这篇关于在我的同构网络应用程序中使webpack热更新正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
