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++开发的优点之一是代码可以在运行的时候才加载,基于此我们 ...
随机推荐
- spring-线程池(2)
继承:http://www.cnblogs.com/crazylqy/p/4220743.html spring设置容器启动时运行线程类(可循环执行) 修改以下两文件, 1.spring设置容器启动时 ...
- JQuery版评分控件
Hi All, 分享一个学习JQuery做的一个评分控件. 需求:当鼠标移动到 ‘☆’ 上时,该字符左边的 ‘☆’ 变成 '★',该字符右边仍然是 ‘☆’, 并显示相应星星数的评价结果:当鼠标推出 ‘ ...
- Hibernate与Jpa的关系(2)
[转自:http://blog.163.com/hero_213/blog/static/398912142010312024809/ ] 近年来ORM(Object-Relational Mappi ...
- jenkins+ant+jmeter html报告文件作为附件发送(ant-jmeter支持javamail)
前言:由于ant-jmeter目前的版本不支持javamail,也就是说发送邮件时只能借助jenkins自带的发送邮件插件来发送报告. 但是jenkins发送邮件支持发送邮件内容(且有价值.有营养的内 ...
- 刨根究底字符编码之十一——UTF-8编码方式与字节序标记
UTF-8编码方式与字节序标记 一.UTF-8编码方式 1. 接下来将分别介绍Unicode字符集的三种编码方式:UTF-8.UTF-16.UTF-32.这里先介绍应用最为广泛的UTF-8. 为满足基 ...
- UVALive-5731
UVALive-5731 题意 一颗 n - 1 条边的有向树,要求整棵树成为强连通图,一次操作即构建一条路(一笔画), 限制: 新建的路上的所有边必须与原有的边逆向,即构建的路必须在原有的边和点上, ...
- canvas实现视频截图
截取视频当前播放画面,直接上源码. <body> <div class="container"> <video id="test" ...
- 对于JSONObject,我只是临时抱佛脚
说起JSON,大家就谈不上陌生了,因为对于数据传输语言,各位只认json,即使有XML语言,但是各位很少用吧.我也是,但是之前用过的json转换工具各种各样,我记忆中有过GSON(google).fa ...
- angular嵌入注入服务实例
<!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <met ...
- 用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 前台页面
首先来看一下我已经实现的效果图: 消费者页面:(本篇随笔) (1)会显示店主的头像 (2)当前用户发送信息显示在右侧,接受的信息,显示在左侧 店主或客服页面:(下一篇随笔) (1)在左侧有一个列表 , ...