开发react程序时实现服务器开发和热替换

原理:利用webpackDevMiddleware和webpackHotMiddleware两个中间件完成开发服务器和热替换的配置工作,配置Babel使其支持热替换使用react-hmre。

webpackDevMiddleware可以将webpack的打包功能和Express服务器的资源服务功能合二为一。该中间件可以监视代码的变动,一旦代码变动就会停止提供旧代码资源服务,等待编译完成后提供新的资源服务。

webpackHotMiddleware可以在代码更新后保留程序状态,即实现热替换。

react-hmre预设:配置Babel支持react热替换。


步骤1:新建一个项目目录

步骤2:进入到项目目录,安装相关的包,如下package.json

步骤3:配置.babelrc,如下:

步骤4:配置webpack.config.js,如下:

步骤5:配置express服务器,server.js如下。

运行方法:npm start

详情代码实现github地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容