热更新,可以使开发的人在修改代码后,不用刷新浏览器即可以看到修改后的效果。而它的另一个好处则是可以只替换修改部分相关的代码,大大的缩短了构建的时间。
热更新一般会涉及到两种场景下面的使用,一个是项目属于纯前端资源的,另一种是node工程项目。
完整工程项目可参考github上面 demo 配置或者 官方示例
配置过程内容比较多,这里大致描述下实现热更新能力需要做些什么。
首先安装相关的包,会发现热更新的能力主要是 webpack-dev-server
实现,它提供一个本地服务器,并且在内容发生变化时更新浏览器内容。而 react-hot-loader
主要作用是重刷react组件,非react项目中不要,这样配置又简化了。
然后在构建的配置文件中需要做一些配置,该配置作用是将热更新所需要的代码注入到入口js文件中
配置完成后,你只需要修改代码,静静的看着浏览器更新就好了。
react-hot-loader 这个组件比较强大,可以在redux或者react native项目中使用。
这里配置方法与上面类似,在此基础之上多了一些配置
demo 在github上可下载运行
首先, 我们需要一个中间件,嵌入到server中(server以koa2为例)
npm i —save koa-webpack
koa-webpack其中主要依赖两个包webpack-dev-middleware和webpack-hot-middleware, 拆开来使用也可以,配置也都类似
第二步,修改构建配置文件
之前这里是使用server来刷新内容的,这种场景下是去掉了 webpack-dev-server
插件而使用 webpack-hot-middleware
实现
entry: { index: ['react-hot-loader/patch', 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', './src/index.js' ] }
第三步,在server中require这个中间件
const webpackMiddleware = require('koa-webpack'); const config = require('./webpack.config.babel');
第四步, 配置server所需要的参数
这里主要是 config
参数和 dev.publicPath
,其他参数可选而已,这里列出来看看
app.use(webpackMiddleware({ config: config, dev: { publicPath: config.output.publicPath, // public path to bind the middleware to // use the same as in webpack // publicPath is required, whereas all other options are optional noInfo: false } }));
第五步,修改启动server
const http = require('http'); const server = http.createServer(app.callback()); server.listen(8080, () => { console.log('server running at http://127.0.0.1:8080'); });
启动程序后查看效果,修改代码后直接看浏览器内容是否更新
dev.publicPath
决定(因为文件是生成在内存中,由外部文件服务器来管理。这里不同于之前纯前端场景下路径由 output.path
和 output.publicPath
来控制)