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 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
js 颜色选择器(兼容firefox)
Mar 05 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
Nov 16 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
轮播的简单实现方法
Jul 28 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
ES6 Map结构的应用实例分析
Jun 26 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+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
javascript解析json实例详解
2014/11/05 Javascript
javascript闭包的理解
2015/04/01 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
在什么时候需要使用"常引用"
2015/12/31 面试题
.NET笔试题(20个问题)
2016/02/02 面试题
乡镇防汛工作汇报
2014/10/28 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
信息技术研修心得体会
2016/01/08 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
Java基础——Map集合
2022/04/01 Java/Android