ReactJS服务器端重新加载（webpack-dev-server）
我正在尝试使用ReactJS构build我的第一个服务器端渲染。 我从这个Redux教程基于我的代码
运行npm start （ webpack && node server.js ）时，应用程序运行正常。
我想用热重装来在dev环境下做一个应用程序的快速debugging。 所以我在npmconfiguration（ webpack-dev-server --inline --hot ）上添加了start选项。 请注意，我没有index.html文件，因为react-router正在select正确的JSX文件加载。
npm开始打开我的公共文件夹和显示文件，但没有启动我的应用程序。 通常我会点击一个index.html文件，但我没有。
我不明白是怎么回事，也不知道如何解决。 帮助赞赏。
的package.json：
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.prod.js -p", "start": "webpack-dev-server --inline --hot", "dev": "webpack && node server.js" },
webpack.config.js：
module.exports = { entry: './client.js', output: { filename: 'bundle.js', path: __dirname + '/public' }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['react', 'es2015', 'stage-0'] } } ] } };
server.js
require('babel-register')({ presets: ['react', 'es2015', 'stage-0'] }); var express = require('express'); var config = require('config'); var app = express(); var serverConfig = config.get('serverConfig'); app.use(express.static('public')); app.use(require('./routes/index.jsx')); app.listen(serverConfig.port, function () { console.log('FactoryWays server running on port ' + serverConfig.port); console.log('Press CTRL-C to stop the server.'); });
client.js
var ReactDOM = require('react-dom'); var React = require('react'); var routes = require('./routes/routes.jsx'); var Redux = require('redux'); var Provider = require('react-redux').Provider; function reducer(state) { return state; } var store = Redux.createStore(reducer, window.PROPS); ReactDOM.render( <Provider store={store}> {routes} </Provider>, document );
路线/ index.jsx：
var router = require('express').Router(); var React = require('react'); var ReactDOMServer = require('react-dom/server'); var ReactRouter = require('react-router'); var Redux = require('redux'); var Provider = require('react-redux').Provider; function reducer(state) { return state; } router.get('*', function(request, response) { var initialState = { title: 'Universal React' }; var store = Redux.createStore(reducer, initialState); ReactRouter.match({ routes: require('./routes.jsx'), location: request.url }, function(error, redirectLocation, renderProps) { if (renderProps) { var html = ReactDOMServer.renderToString( <Provider store={store}> <ReactRouter.RouterContext {...renderProps} /> </Provider> ); response.send(html); } else { response.status(404).send('Not Found'); } }); }); module.exports = router;
路线/ routes.jsx：
var React = require('react'); var ReactRouter = require('react-router'); var Router = ReactRouter.Router; var Route = ReactRouter.Route; var IndexRoute = ReactRouter.IndexRoute; var browserHistory = ReactRouter.browserHistory; module.exports = ( <Router history={browserHistory}> <Route path='/' component={require('../views/Layout.jsx')}> <IndexRoute component={require('../views/Index.jsx')} /> </Route> </Router> );
意见/ Layout.jsx：
var React = require('react'); var Link = require('react-router').Link; var connect = require('react-redux').connect; var Layout = React.createClass({ _handleClick: function() { alert(); }, render: function() { var custom = this.props.custom; return ( <html> <head> <title>{custom.title}</title> <link rel='stylesheet' href='/style.css' /> </head> <body> <h1>{custom.title}</h1> <p>Isn't server-side rendering remarkable?</p> <button onClick={this._handleClick}>Click Me</button> {this.props.children} <ul> <li> <Link to='/'>Home</Link> </li> <li> <Link to='/about'>About</Link> </li> </ul> <script dangerouslySetInnerHTML={{ __html: 'window.PROPS=' + JSON.stringify(custom) }} /> <script src='/bundle.js' /> </body> </html> ); } }); var wrapper = connect( function(state) { return { custom: state }; } ); module.exports = wrapper(Layout);
请注意，我没有index.html文件，因为react-router正在select正确的JSX文件加载
如果你正在运行webpack-dev-server你仍然需要一个。
Webpack被用来将JavaScript捆绑在一起。 而已。 你的情况（基于你的webpack.config.js文件），它是在你的public目录下输出一个bundle.js文件。
Webpack Dev Server是一个简单的静态文件服务器来帮助开发。 它不知道server.js的服务器configuration。
package.json中的两条命令需要不同的设置：
npm start
npm start运行webpack-dev-server 。 默认情况下， webpack-dev-server会提供当前目录的内容，所以你需要把你的index.html放在项目的根目录下。 index.html的内容很简单：只是包含链接到您的bundle.js文件的script标记的样板HTML。
npm dev
然而，当你运行npm dev时，你正在使用server.js定义的自己的服务器。 在这种情况下，它被configuration为生成并提供index.html （以及所有其他需要的静态文件）。
如果您想进行热重新加载并运行您自己的服务器，则可以将webpack-dev-middleware添加到您的Express服务器。