webpack教程(三)——热刷新
现在我们如果修改代码,需要重新打包,再一次在命令行下输入webpack命令,很麻烦。
热刷新是什么呢?就是我们该完代码保存之后webpack会自动打包引起浏览器自动刷新,你只需要把精力都专注在代码研发上不需要再分散精力在打包上。节省了时间和精力,效率更高了。
怎么做呢?
首先安装
cpm intall webpack-dev-server --save-dev
打开package.json文件。

打开命令行,运行npm run start
打开浏览器 转到http://localhost:8080
当我们修改代码保存的时候,浏览器会直接刷新

如果我们的8080端口被占用,想在其他端口打开怎么办?
在webpack.config.js中添加如下代码

打开浏览器,端口号改为9000

已经成功的在9000端口上运行。
更多关于dev-server的细节去https://webpack.js.org/configuration/dev-server查看。

webpack教程(三)——热刷新的更多相关文章
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.htm ...
- [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 三十║ Nuxt实战:动态路由+同构
上期回顾 说接上文<二九║ Nuxt实战:异步实现数据双端渲染>,昨天咱们通过项目二的首页数据处理,简单了解到了 nuxt 异步数据获取的作用,以及亲身体验了几个重要文件夹的意义,整篇文章 ...
- [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- webpack与browser-sync热更新原理深度讲解
本文首发于CSDN网站,下面的版本又经过进一步的修订.原文:webpack与browser-sync热更新原理深度讲解本文包含如下内容: webpack-hot-middleware EventSou ...
- Elasticsearch入门教程(三):Elasticsearch索引&映射
原文:Elasticsearch入门教程(三):Elasticsearch索引&映射 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文 ...
- Laravel教程 三:视图变量传递和Blade
Laravel教程 三:视图变量传递和Blade 此文章为原创文章,未经同意,禁止转载. Blade 上一篇我们简单地说了Router,Views和Controllers的工作流程,这一次我就按照上一 ...
- Webpack教程二
Webpack教程一 开发技巧 启用source-map 现在的代码是合并以后的代码,不利于排错和定位,只需要在config中添加 ... devtool: 'eval-source-map', .. ...
- 【Quick 3.3】资源脚本加密及热更新(三)热更新模块
[Quick 3.3]资源脚本加密及热更新(三)热更新模块 注:本文基于Quick-cocos2dx-3.3版本编写 一.介绍 lua相对于c++开发的优点之一是代码可以在运行的时候才加载,基于此我们 ...
随机推荐
- 点击空白处隐藏指定dom元素(纯javascript方法)
<script type="text/javascript"> document.onclick = function (event) { event = event ...
- (基础篇 走进javaNIO)第一章-java的i/o演进之路
Java 是由 SUN公司在 1995 年首先发布 的编程语 言和计算平 台.这基础技术 支持最新 的程序 ,包括 实用程序 .游 戏和业 务应用程序 .J ava 在世界各地 的 8.5 亿 多 ...
- WPF 简易的跑马灯效果
最近项目上要用到跑马灯的效果,和网上不太相同的是,网上大部分都是连续的,而我们要求的是不连续的. 也就是是,界面上就展示4项(展示项数可变),如果有7项要展示的话,则不断的在4个空格里左跳,当然,衔接 ...
- 可视化之Berkeley Earth
去年冬天雾霾严重的那几天,写了两篇关于空气质量的文章,<可视化之PM2.5>和<谈谈我对雾霾的认识>.坦白说,环境问题是一个无法逃避又无能为力的话题.最近因为工作中有一些数据可 ...
- 自己动手实现html去标签和文本提取
随意观看 [TOC] 工具 python3.6 正则表达式(别的语言思路一样,容易借鉴) python正则表达式:flags的应用 这里主要介绍一下re.compile(pattern[, flags ...
- sql还原(.bak文件还原)
第一步: 右键“数据库”,选择“还原数据库” 第二步: 选择“设备”,然后选择“…” 第三步: 添加备份文件(这里使用MyDB.bak) 第四步: 勾选“还原”复选框,进度显示“已完成” 第五步: 最 ...
- \classes\META-INF\MANIFEST.MF (系统找不到指定的路径。)
开发项目重启eclipse 发现了如下错误! 解决方法 选择出现错误的项目 点击clean 即可~
- node.js零基础详细教程(3):npm包管理、git github的使用
第三章 建议学习时间4小时 课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑 ...
- 微信小程序开发 -- 02
微信小程序开发 --02 微信小程序在开发中,难度系数不是很大,其中应用的技术也是web开发中常用的技术,虽然在微信开发者工具中的叫法与常见的web开发的叫法不太一样. 首先,在微信小程序开发中,代码 ...
- Visual studio常用的code snippets
作为全球第一的IDE,VS用起来自然相当的爽,当你在visual studio里敲出几个字母,能帮你生成一大段代码,省时省力又能装逼. 比如,你打一个 prop,然后按tab键,就能生成一个带get/ ...