react服务器渲染下,hot reload解决方案
原文链接
前言由
hot reload分析
react静态资源热加载分析react静态资源的热加载配置并不复杂。
plugins: [ new webpack.HotModuleReplacementPlugin() ] // ... entry: [ 'react-hot-loader/patch','webpack-dev-server/client?http://127.0.0.1:8080','webpack/hot/only-dev-server','./src/client/home',// 入口路径 ]
"plugins": [ "react-hot-loader/babel" ]
import React from 'react'; import ReactDOM from 'react-dom'; // 共享的组件页面 import Home from '../shared/page/Home'; // 热加载组件 import ReactHotLoader from '../shared/component/ReactHotLoader'; const container = document.getElementById('react-container'); function renderApp(TheApp) { ReactDOM.render( <ReactHotLoader> <TheApp /> </ReactHotLoader>,container ); } renderApp(Home); // 下面的代码用来支持我们热加载应用 if (__DEV__ && module.hot) { // 接受这个文件的修改用来热加载 module.hot.accept('./home.js'); // 应用任何的改变将造成热加载,重新渲染。 module.hot.accept( '../shared/page/Home',() => renderApp(require('../shared/page/Home').default) ); } react服务器配置分析开发模式下,server端的配置比较复杂,需要考虑的事情如下:
// 监听server文件的变化,如果被修改则调用compileHotServer const watcher = chokidar.watch([ path.resolve(__dirname,'../src'),path.resolve(__dirname),],{ignored: path.resolve(__dirname,'../src/client')}); watcher.on('ready',() => { watcher .on('add',compileHotServer) .on('addDir',compileHotServer) .on('change',compileHotServer) .on('unlink',compileHotServer) .on('unlinkDir',compileHotServer); });
// 关闭所有连接,关闭服务器,重新编译 function compileHotServer() { compiling ++; // listenerManager实例包含当前web服务器对象和客户端连接的socket集合 if (listenerManager) { listenerManager.dispose(true).then(runCompiler); } else { runCompiler(); } } // webpack重新编译 function runCompiler() { compiler.run(() => undefined); }
// server代码编译完成 // 开启server服务器 compiler.plugin('done',stats => { compiling --; if (compiling !== 0) return; if (stats.hasErrors()) { console.log(stats.toString()); return; } console.log(' |