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 相关文章推荐
node.js中的console.warn方法使用说明
Dec 09 Javascript
JSONP原理及简单实现
Jun 08 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 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
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
jquery随意添加移除html的实现代码
2011/06/21 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
Django 实现下载文件功能的示例
2018/03/06 Python
python解析含有重复key的json方法
2019/01/22 Python
详解Python做一个名片管理系统
2019/03/14 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
旅游个人求职信范文
2014/01/30 职场文书
双方协议书
2014/04/22 职场文书
绿色环保口号
2014/06/12 职场文书
社区活动策划方案
2014/08/21 职场文书
物理课外活动总结
2014/08/27 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
2014年超市工作总结
2014/11/19 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
班委竞选稿范文
2015/11/21 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技