react项目实践之webpack-dev-serve


Posted in Javascript onSeptember 14, 2018

模块热替换(Hot Module Replacement)

HMR是webpack最令人兴奋的特性之一,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模块发送到浏览器端,浏览器通过新的模块替换老的模块,这样在不刷新浏览器的前提下就能够对应用进行更新。HMR是一个非常值得去深入研究的东西,它绝不是目前我们看到的大多数技术文章说的配置一个hot参数这么简单,有兴趣的小伙伴可以去看看它的实现原理,目前为止我也只看过一点点。

其实实现HMR的插件有很多,webpack-dev-server只是其中的一个,当然也是优秀的一个,它能很好的与webpack配合。另外,webpack-dev-server只是用于开发环境的。

webpack-dev-server是一个小型的静态文件服务器,为webpack打包的资源文件提供Web服务。并且提供自动刷新和Hot Module Replacement(模块热替换:前端代码变动后无需刷新整个页面,只把变化的部分替换掉)。

(1)安装

npm install webpack-dev-server --save-dev

(2)配置

修改webpack.config.js,添加devServer的配置

devServer: {
    contentBase: './dist',
    port: 3000, // 默认8080
    host:'localhost',
    inline: true // 实时刷新
  },

webpack-dev-server支持两种自动刷新方式:

  1. Iframe mode
  2. Inline mode

react项目实践之webpack-dev-serve

修改package.json,添加script脚本start: " start " : " webpack-dev-server --open "

react项目实践之webpack-dev-serve

此时,在命令行输入 npm start ,则浏览器自动打开页面。

修改页面内容并保存,页面实现实时刷新。

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

Javascript 相关文章推荐
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
关于layui时间回显问题的解决方法
Sep 24 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 #Javascript
vue删除html内容的标签样式实例
Sep 13 #Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 #Javascript
vue2.0获取鼠标位置的方法
Sep 13 #Javascript
vue实现动态列表点击各行换色的方法
Sep 13 #Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 #Javascript
JSONP原理及应用实例详解
Sep 13 #Javascript
You might like
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
php取出数组单个值的方法
2018/03/12 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
vue观察模式浅析
2018/09/25 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
js图片无缝滚动插件使用详解
2020/05/26 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
几个Linux面试题笔试题
2016/08/01 面试题
满月酒主持词
2014/03/27 职场文书
团代会邀请函
2015/02/02 职场文书
大学学生会辞职信
2015/05/13 职场文书