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++开发的优点之一是代码可以在运行的时候才加载,基于此我们 ...
随机推荐
- Ubuntu怎样进行自由截图操作
全屏截图 1. 很简单,键盘上右上角都有一个 Print Screen按键,敲一下,全屏截图操作完成. 自由截图 1. 此种方式很简单,打开系统设置->键盘,进入shortcuts选项 2. 点 ...
- Ehcache 整合Spring 使用页面、对象缓存(1)
转自:http://www.cnblogs.com/hoojo/archive/2012/07/12/2587556.html Ehcache在很多项目中都出现过,用法也比较简单.一般的加些配置就可以 ...
- iOS面试题及答案
设计模式是什么? 你知道哪些设计模式,并简要叙述? 设计模式是一种编码经验,就是用比较成熟的逻辑去处理某一种类型的事情. 1). MVC模式:Model View Control,把模型 视图 控制器 ...
- 基于html5 Canvas图表库 : ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
- Java静态代理与动态代理模式的实现
前言: 在现实生活中,考虑以下的场景:小王打算要去租房,他相中了一个房子,准备去找房东洽谈相关事宜.但是房东他很忙,平时上班没时间,总找不到时间去找他,他也没办法.后来,房东想了一个办法,他找到 ...
- Java之枚举
1.定义 enum 是一种数据类型,与 全局常量比较相似,都是全局的并且是可以通过类名调用的 与全局常量区别 枚举功能更强大,可以有属性和方法 枚举比全局常量更加的规范 2.枚举特性 1)可以有属性以 ...
- 解决 Excel 打开 UTF-8 编码 CSV 文件乱码的 BUG
解决 Excel 打开 UTF-8 编码 CSV 文件乱码的 BUG zoerywzhou@163.com http://www.cnblogs.com/swje/ 作者:Zhouwan 2017-6 ...
- Centos 执行shell命令返回127错误
shell脚本功能:连接mysql,自动创建数据库,脚本如下 mysql -h$MYSQL_IP -u$MYSQL_USER -p$MYSQL_PASSWORD --default-character ...
- java基础(五章)
一. 调试 步骤1:设置断点(不能在空白处设置断点) 步骤2:启动调试 步骤3:调试代码(F6单步跳过)笔记本Fn+F6(F5) 步骤4:结束调试 掌握调试的好处? l 很清晰的看到, ...
- pb传输优化浅谈
在正式切入今天要谈的优化之前,先碎碎念一些自己过去这几年的经历.很久没有登录过博客园了,今天也是偶然兴起打开上来看一下,翻看了下自己的随笔,最后一篇原创文章发布时间是2015年的4月,今天是2017年 ...