我一直在做很多阅读,似乎github上有很多可用的样板,它们都可以使用webpack-dev-server来重建客户端包 . 但是,我不确定服务器是如何或是否重新加载热模块 . 有没有办法配置webpack在服务器端启用HMR?否则,似乎我更改的任何内容都不会由服务器呈现,只在客户端刷新 .
我的webpack配置看起来像这样:
module.exports = {
entry: "./js/client.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
}
]
},
output: {
path: __dirname + "/public/",
filename: "client.min.js"
}
};
server.js:
app.get('/', function(request, response) {
var html = ReactDOMServer.renderToString(React.createElement(Component));
response.send(html);
});
Component.js:
module.exports = React.createClass({
_handleClick: function() {
alert();
},
render: function() {
return (
<html>
<head>
<title>{this.props.title}</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<h1>{this.props.title}</h1>
<p>isn't server-side rendering remarkable?</p>
<button onClick={this._handleClick}>Click me</button>
<script dangerouslySetInnerHTML={{
__html: 'window.PROPS=' + JSON.stringify(this.props)
}} />
<script src="/client.min.js" />
</body>
</html>
);
}
})
和client.js:
var props = window.PROPS;
ReactDOM.render(React.createElement(Component, props), document);
我使用 webpack-dev-server --content-base src --inline --hot
来运行webpack
1 回答
您将要通过
server.js
运行代码 . 在package.json
中创建一个脚本来运行该文件 .例如:
然后,添加
webpack-dev-server
的替代品,即webpack-dev-middleware
和webpack-hot-middlware
,可以帮助您HMR
.这就是
server.js
的样子:然后,运行您的脚本,如下所示:
npm run serve
只需访问浏览器上的端口,您的客户端就会显示出来 .
希望这可以帮助 .