webpack-dev-server 和后端服务最简单的搭配使用

最近做react的项目，后端用nodejs做了服务，想利用webpack-dev-server作为前端资源的热更新服务，而其他api均走后端nodejs服务，查了下资料，网上说的很复杂，在经过摸索之后，发现其实可以利用很简单的原理就可以实现。
这里做法有两种可选如下：

假设webpack-dev-server的端口是3000。nodejs服务的端口是9000。
这里需要知道，只要资源从3000端口被访问，就回被实时更新。无论当前页面端口是否是3000。
知道这个原理就好了。
1, 如果我们直接访问的是3000端口，这样很简单，资源就可以实时更新，但是后端服务的api怎么办，跨越怎么办。可以设置proxy如下，只要是涉及到需要跨域请求的做一个代理就好了：

new WebpackDevServer(webpack(config), {
    contentBase:  'src/client',
    proxy: {
        '/api/*': {
            target: 'http://localhost:9000'
        }
    },
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
    if (err) {
        return console.log(err);
    }

    console.log('webpack dev server is listening at http://localhost:3000/')
});

这也就解决了使用后端api的问题。
2，那么如果我们期望直接访问后端端口，访问nodejs服务端口来实现。
那么如何使静态资源可以实时更新呢？答案就是设置资源的publicPath，即资源在被引入的时候的完整路径。我们需要将WebpackDevServer的publicPath和webpack config里的publicPath都设置成3000端口路径下的资源文件夹即可，如：
publicPath: 'http://localhost:3000/dist/client/'
那么所有的访问到的资源就还是会正常加载，同时涉及到请求的还是会走代理。注意的是，这种方式需要将node服务访问时返回的首页进行服务端设置，或设置静态资源目录即可。