吉林11选5中奖奖金:webpack中的热刷新与热加载的区别

吉林11选5一定牛网 www.nocios.com 转载  2018-04-09   作者:HannibalKcc   我要评论

本篇文章主要介绍了webpack中的热刷新与热加载的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

webpack非常的强大,合理的脚手架可以为我们的工作省去众多繁琐无意义的工作。其中热刷新、热加载相较于传统开发大大提高了开发节奏。

从脚手架发现热刷新、热加载的差异

相信大部分的vue开发者都是从vue-cli开始的,很多初学者欢快的跑着vue项目却不敢改随意改变vue-cli的配置(毕竟webpack确实很复杂,vue-cli也做了很多工作来优化初学者的体验)。

相比之下react没有提供一个比较健壮的脚手架了(至少没有明显地被我找到,望赐教)。据我知一个是yeoman的 generator-react-webpack、react的create-react-app,还有一个不错的react-starter-kit (热加载,而且集成了非常多代码,参考性很高)。
在学习react时我就发现了上文提到的react前两个脚手架提供的是热刷新而非热加载。

简单的区分热加载与热刷新:

热刷新:文件内动改动后,整个页面刷新,不保留任何状态(比如输入过内容的Input表单),相当于webpack帮你摁了F5刷新
热加载:文件改动后,以最小的代价改变被改变的区域。尽可能保留改动文件前的状态(对input输入内容后,修改其他标签的代码)

这在虽然两者相较于传统开发(手动F5)都提升了开发体验,但两者之间的依旧很大,尤其是当项目变得愈发复杂之后,我们必须一劳永逸的解决这个问题(留出更多的时间来开发bug)。

动手修改

从头配置就是另一个领域了,所以我们直接从vue-cli开始改动。

下述步骤仅列出关键做启发参考,详细请参考最后github完整项目

  1. 删除vue相关的依赖、文件等;整个scr内的东西都可以删掉
  2. package.json依赖加入babel-loader webpack-dev-server react-hot-loader(最关键)
  3. package.json命令行设置 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
  4. webpack.base.conf 添加.jsx文件需要经过babel-loader处理,配置options:{plugins:['react-hot-loader/babel']}
  5. .babelrc presets加入react,下方加入plugins:['react-hot-loader/babel']
  6. src文件夹下创建main.js(起名要跟webpack配置的入口文件一致)
import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
import { hot } from 'react-hot-loader';

import App from './pages/App'; // 自己写吧
import './assets/css/reset.scss';

// Render the main component into the dom
ReactDOM.render(<App/>, document.getElementById('app'));

export default hot(module)(App); // 热加载的关键

至此,我们就可以愉快地使用react体验热加载的快♂感了~

问题所在

其实在简单地修改vue-cli中的main.js文件为react相关代码(别忘了配置babel处理jsx)并依旧是热刷新。

经过本地代码观察对比后,发现了一个吸引人的名字:

在webpack.dev.conf文件中:

new webpack.HotModuleReplacementPlugin()

网上查询后得知这是实现热加载的关键,它需要代码本身具备??榛男灾剩ㄕ庖馕蹲胖灰袢罂蚣苷庋杀嘈纯筛从米榧目蚣芏寄芾谜飧鲂灾剩?,这样才可以通过插♂拔代码实现热加载。

而react的jsx特效不是HotModuleReplacementPlugin能搞定的只能老老实实热刷新了。

在这种情况下react-hot-loader呼之欲出。配合官方的使用方法,就能继续使用热加载了。

ps: 仅做参考,react的很多代码我也处于探索与学习中

配置好的项目地址:gayhub

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

最新评论

660| 206| 316| 393| 994| 130| 865| 781| 752| 303|