现在我们如果修改代码,需要重新打包,再一次在命令行下输入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教程(三)——热刷新的更多相关文章

  1. [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

    还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.htm ...

  2. [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

    本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...

  3. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 三十║ Nuxt实战:动态路由+同构

    上期回顾 说接上文<二九║ Nuxt实战:异步实现数据双端渲染>,昨天咱们通过项目二的首页数据处理,简单了解到了 nuxt 异步数据获取的作用,以及亲身体验了几个重要文件夹的意义,整篇文章 ...

  4. [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

  5. webpack与browser-sync热更新原理深度讲解

    本文首发于CSDN网站,下面的版本又经过进一步的修订.原文:webpack与browser-sync热更新原理深度讲解本文包含如下内容: webpack-hot-middleware EventSou ...

  6. Elasticsearch入门教程(三):Elasticsearch索引&映射

    原文:Elasticsearch入门教程(三):Elasticsearch索引&映射 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文 ...

  7. Laravel教程 三:视图变量传递和Blade

    Laravel教程 三:视图变量传递和Blade 此文章为原创文章,未经同意,禁止转载. Blade 上一篇我们简单地说了Router,Views和Controllers的工作流程,这一次我就按照上一 ...

  8. Webpack教程二

    Webpack教程一 开发技巧 启用source-map 现在的代码是合并以后的代码,不利于排错和定位,只需要在config中添加 ... devtool: 'eval-source-map', .. ...

  9. 【Quick 3.3】资源脚本加密及热更新(三)热更新模块

    [Quick 3.3]资源脚本加密及热更新(三)热更新模块 注:本文基于Quick-cocos2dx-3.3版本编写 一.介绍 lua相对于c++开发的优点之一是代码可以在运行的时候才加载,基于此我们 ...

随机推荐

  1. 论MySQL何时使用索引,何时不使用索引

    索引: 使用索引可快速访问数据库表中的特定信息.索引是对数据库表中一列或多列的值进行排序的一种结构,例如 employee 表的姓(name)列.如果要按姓查找特定职员,与必须搜索表中的所有行相比,索 ...

  2. 【shell脚本实例】一个恶作剧—— kill掉占用CPU较高的matlab进程

    我们实验室有台服务器,博士们在服务器上跑MATLAB,基本都是4核都是超过95%的CPU占用,想了个恶作剧的shell 定时kill掉MATLAB程序,是不是很邪恶啊,哈哈~~~  不过我只是干过一次 ...

  3. 并串转换FPGA电路结构的探讨

    如题,并串转换时FPGA设计里,一个很常用的模块,这里有一个小的探讨. 一般情况下我们可以使用一个计数器与数据选择器进行并串转换,如下图的的结构.这个结构通过计数器不断的改变数据选择器的地址端,从而使 ...

  4. linux中搭建java开发环境

    JDK安装 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 下载对应jdk版本, ...

  5. Vulkan Tutorial 05 物理设备与队列簇

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Selecting a physical device 通过VkInstance初始 ...

  6. Python教程(2.3)——运算符和类型转换

    Python里有很多运算符(operator),这节就让我们来详细学一学. 注意:本文没有特别说明的地方,只考虑bool.int.float三种类型.例如"两边操作数类型相同时,得到的结果为 ...

  7. div的替代品

    人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>--具体地说,就是直接用作替代品(用于样式).在XHTML或者HTML4中,我们常看到 ...

  8. python不使用第三方变量,交换两个变量的值

    #不使用第三个变量交换两个变量的值 a=1 b=2 a,b=b,a#python的直接交换 #另一种交换方法 a=a+b#a=3 b=2 b=a-b#a=3 b=1 a=a-b#a=2 b=1 pri ...

  9. [Lucene]-Lucene基本概述以及简单实例

    一.Lucene基本介绍: 基本信息:Lucene 是 Apache 软件基金会的一个开放源代码的全文检索引擎工具包,是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎,部分文本分析引擎.Luc ...

  10. 用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 前台页面

    首先来看一下我已经实现的效果图: 消费者页面:(本篇随笔) (1)会显示店主的头像 (2)当前用户发送信息显示在右侧,接受的信息,显示在左侧 店主或客服页面:(下一篇随笔) (1)在左侧有一个列表 , ...