解决的问题
webpack hot module reload
在某些情况下无法自动更新 react 应用对已有的服务侵入式的修改.
开发时需要在两个端口上启动两个服务器,一个
backend server
一个webpack devserver
方法
webpack config
webpack.config.js
采用react-hot-boilerplate
注意修改自己的entry
中服务器的地址和端口,直接改成backend server
的ip和端口
output.publicPath
也要修改成backend server
中对应的静态文件的路径,如
publicPath: 'http://127.0.0.1:4000/dist/'
backend server的修改
已有的backend server
express server 导出为 backendApp
.
定义app.js
如下
var WebPackDevServer = require('webpack-dev-server') var backendApp = require('./backendApp') if (process.env.NODE_ENV !== 'production') { var webpack = require('webpack'); var config = require('./webpack.config.dev'); const compiler = webpack(config); var devServer = new WebPackDevServer(compiler,{ noInfo: true,publicPath: config.output.publicPath,hot: true,contentBase: false }) devServer.app.use(backendApp) module.exports = devServer } else { module.exports = expressApp }
devServer.app.use(backendApp)
这行就是这个思路的关键,相当于dev server
mixin了backend server
的所有功能,并且替换了需要编译的js静态文件,使得他们具有hot reload的功能.
启动服务
我们项目的习惯会为每个项目建立一个boot.js
启动服务的文件,也可以选择其他方式启动服务,其实就是调用app.listen
启动服务.
var app = require('./app'); var port = process.env.PORT || 4000 app.listen(port,function () { console.log('helloworld server listening on port ' + port) })
这样就能在开发阶段只需要开启backend server
就能享受webpack devserver
带来的自动重新编译功能和gaearon大神带来的react reload.
如果本文你对有用 欢迎请我喝咖啡
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。