极客观点
项目管理
HarmonyOS
初学react全家桶，在搭建项目结构的时候遇到2个问题：
1：目前express可以使用webpack打包前端的代码，但是不知道该如何弄自动刷新页面。
2：因为要在服务端渲染react+redux+router,当前端的代码改变，刷新的时候会报前端代码和服务端代码不一致的错误，如下
github项目地址：https://github.com/yourenA/re...
请问一下怎么解决这两个问题或者有什么相似的脚手架可以告诉小弟一声
express端代码如下
/**
* Created by Administrator on 2017/1/3.
*/
var webpack=require('webpack');
var morgan = require('morgan')
var favicon = require('serve-favicon');
var webpackDevMiddleware=require('webpack-dev-middleware');
var webpackHotMiddleware=require('webpack-hot-middleware');
var config=require('./webpack.config');
var app=new (require('express'));
var port=3001;
var compiler=webpack((config));
app.use(webpackDevMiddleware(compiler,{noInfo:true,publicPath:config.output.publicPath}));
app.use(webpackHotMiddleware(compiler));
app.use(morgan('combined'));
app.use(favicon(__dirname + '/static/dist/link.ico'));
var qs = require('qs');
import {fetchCounter} from './common/api/counter'
import { match, RouterContext } from 'react-router';
import {Provider} from 'react-redux'
import React from 'react';
import {renderToString} from 'react-dom/server';
import configureStore from './src/store/configureSote'
import getRoutes from './src/Routes';
const routes = getRoutes();
function handlerender(req, res) {
fetchCounter(apiResule=> {
const params = qs.parse(req.query);
const counter = parseInt(params.counter, 10) || apiResule || 0;
var initailStrate = {};
const store = configureStore(initailStrate);
match({ routes, location: req.url }, (err, redirect, renderProps) => {
if (redirect) {
res.redirect(redirect.pathname + redirect.search);
} else if (err) {
console.error('ROUTER ERROR:', err.stack);
res.status(500);
} else if (renderProps) {
res.status(200);
const html = renderToString(
<Provider store={store}>
<RouterContext {...renderProps} />
</Provider>
);
const finalState = store.getState();
res.send(renderFullPage(html, finalState));
} else {
res.status(404).send('Not found');
}
});
})
}
function renderFullPage(html, initialState) {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>app</title>
</head>
<body>
<div id="app">${html}</div>
<script>
window.__INITIAL_STATE__=${JSON.stringify(initialState)}
</script>
<script src="/static/bundle.js"></script>
</body>
</html>
`
}
app.use(handlerender);
app.listen(port,function (error) {
if (error){
console.error(error);
}else{
console.info("==>Listen on %s.Open up Http://localhost:%s/ in your browser",port,port)
}
});
express搭建webpack的环境，我有一个类似的git项目地址你可以参考一下
去我的主页上有，这个是我个人的项目，还在开发，有时间就写写。
https://github.com/jeremyChen...
热加载－－两种方式
1、webpack-dev-server
2、webpack-dev-middleware和webpack-hot-middleware