Hot Module Replacement,热模块更新,很多时候会简写成HMR。
"scripts": {
  "start": "webpack-dev-server",
},

在加热更新之前,我们运行npm run start,会发现之前我们打包有个dist目录,为什么运行这个命令的时候,dist目录没有了。实际上,webpack-dev-server,还是会对src目录下进行打包的。但是打包生成的文件,他并不会放在dist目录下。而是放到电脑中的内存里面。这样的话,可以有效的提升打包的速度。让我们开发更快,所以不用担心。

index.js
var btn = document.createElement('button');
btn.innerHTML = '新增';
document.body.appendChild(btn); btn.onclick = function() {
  var div = document.createElement('div');
  div.innerHTML = 'item';
  document.body.appendChild(div);
}

这个js是点击一下新增,就新增一个item的div。现在我要实现一个样式的效果。偶数的时候给他加个背景

style.css
div:nth-of-type(odd) {
  background: yellow;
}
这个时候我把yellow改成blue。webpack-dev-server检测到代码对变化就会重新刷新,需要重新点击去测试。那之前好不容易点的东西没有了,又要重新点击,于是我就希望,当改变样式代码的时候,不要刷新页面,只要改变样式就行了,不要给我删除掉之前的dom。这个时候就用到了HMR
module.exports = {
  // 起个服务器
  devServer: {
    // 这个意思是服务器要生成在哪个文件夹下
    contentBase:'./dist',
    // 启动的时候自动打开浏览器,然后自动访问这个服务器地址
    open:true,
    // 开启Hot Module Replacement
    hot: true,
    // 即便hmr的功能没有生效,浏览器也不要自动刷新
    hotOnly: true
  },
  // HtmlWebpackPlugin会在打包结束后,自动生成一个html文件,并把打包生成的js自动引入到这个html文件中
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new CleanWebpackPlugin(),
    // 当dev-server,两项host配置搞定后,再使用这个插件后,hmr功能就生效了
    new webpack.HotModuleReplacementPlugin()
  ],
}
这个时候再去更改样式,就不会影响之前js对html的变更。改了css文件,就只会替换css的内容
所以使用HMR的好处是,在写css的时候,方便调试css。
 
这是时候再把上面的配置恢复到没有hmr的时候
module.exports = {
  // 起个服务器
  devServer: {
    // 这个意思是服务器要生成在哪个文件夹下
    contentBase:'./dist',
    // 启动的时候自动打开浏览器,然后自动访问这个服务器地址
    open:true
  },
  // HtmlWebpackPlugin会在打包结束后,自动生成一个html文件,并把打包生成的js自动引入到这个html文件中
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
}
index.js
import counter from './counter';
import number from './number'; counter();
number();
counter.js
function counter() {
  var div = document.createElement('div');
  div.setAttribute('id', 'counter');
  div.innerHTML = 1;
  div.onclick = function() {
  div.innerHTML = parseInt(div.innerHTML, 10) + 1;
}
document.body.appendChild(div); export default counter;

number.js

function number() {
  var div = document.createElement('div');
  div.setAttribute('id', 'number');
  div.innerHTML = 1000;
  document.body.appendChild(div);
}
export default number;
这个时候运行页面,把1增加到10。这个时候将number.js里面写死的1000变成2000。发现,呀,我之前点击到的10,又重新恢复到了1。说明刷新了页面。之前的一些数据没有保存下来。我希望number的数据更新到,别去更新我counter.js到内容。这时候把配置加回来
module.exports = {
  // 起个服务器
  devServer: {
    // 这个意思是服务器要生成在哪个文件夹下
    contentBase:'./dist',
    // 启动的时候自动打开浏览器,然后自动访问这个服务器地址
    open:true,
    // 开启Hot Module Replacement
    hot: true,
    // 即便hmr的功能没有生效,浏览器也不要自动刷新
    hotOnly: true
  },
  // HtmlWebpackPlugin会在打包结束后,自动生成一个html文件,并把打包生成的js自动引入到这个html文件中
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new CleanWebpackPlugin(),
    // 当dev-server,两项host配置搞定后,再使用这个插件后,hmr功能就生效了
    new webpack.HotModuleReplacementPlugin()
  ],
}

发现number代码改成2000,页面上的1000并没有变成2000。这个时候需要自己去加点代码

index.js
import counter from './counter';
import number from './number'; counter();
number(); if(module.hot) {
  module.hot.accept('./number', ()=>{
    let removeNode = document.getElementById('number');
    document.body.removeChild(removeNode);
    number();
  })
}
这个时候把1点到10。再去更改number里面的代码,把1000改成2000。这个时候发现10没有任何变化,只从1000更新到20000。
那么这个时候就会想css会自动更新,这里却要在index里面多加这层判断。其实css也是要加这层判断的,只是css-loader里面已经加了这段代码,所以不用写。react,vue里面也内置了这些代码。本质上要写hmr的内容,都需要写这段。只不过框架帮我们实现了,自己不用去写。

webpack中热模块更新的更多相关文章

  1. Webpack & The Hot Module Replacement热模块替换原理解析

    Webpack & The Hot Module Replacement热模块替换原理解析 The Hot Module Replacement(HMR)俗称热模块替换.主要用来当代码产生变化 ...

  2. Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案

    文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...

  3. webpack中如何使用vue

    1.安装 vue包:npm i vue -S 2.由于在webpack中,推荐使用.vue这个组件模版文件来定义组件,不然会出现vue.js移动和一些高级语法的不支持,因此需要安装能解析这种文件的lo ...

  4. webpack中配置Babel

    Babel是一个javascript编译器,可以将ES6和更新的js语法转换成ES5的,使代码在较老的浏览器里也能正常运行. 一.安装 npm install --save-dev babel-loa ...

  5. Webpack的详细配置,[Webpack中各种loader的安装配置]

    在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...

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

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

  7. vue2.0基础知识,及webpack中vue的使用

    ## 基础指令 ## [v-cloak]{         Display:none;     }     <p v-cloak>xx{{msg}}xx</p> //解决闪烁问 ...

  8. vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)

    vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete) 手把手式笔记 Axios配置 安装 axios ...

  9. 17 webpack中babel的配置

    在webpack中,默认只能处理一部分ES6的新语法,一些更高级的ES6语法或者ES7语法, webpack是处理不了的:这时候,就需要借助于第三方的loader,来帮助webpack处理这些高级的语 ...

随机推荐

  1. IDEA设置类注解和方法注解(详解)

    从eclipse工具到IDEA工具的转化,发现IDEA工具配置注释模板变的不一样了,不说废话了,直接开始 一.设置类注解模板(在创建类的时候自动填充模板) /** * @ProjectName: ${ ...

  2. 十二、curator recipes之双重屏障DoubleBarrier

    简介 curator实现了单个屏障barrier和双重屏障DoubleBarrier,单个屏障就是在一个进程里面设置了屏障,并等待其它进程去移除这个屏障,否则一直阻塞.双重屏障就是设置了两道屏障,两个 ...

  3. vmware创建centos虚拟机

    下载centos 安装之前你需要下载centos镜像:http://mirrors.aliyun.com/ 创建虚拟机 如果还没有安装vmware请参考:https://www.cnblogs.com ...

  4. 【转载】Spring Cloud底层原理

    概述 毫无疑问,Spring Cloud是目前微服务架构领域的翘楚,无数的书籍博客都在讲解这个技术.不过大多数讲解还停留在对Spring Cloud功能使用的层面,其底层的很多原理,很多人可能并不知晓 ...

  5. JAVA基础之——使用idea创建maven项目 以及使用tomcat本地调试springmvc

    前言:关于这个话题网上有很多,本文旨在引导实战纠偏,理论偏少,如果按照步骤还不能达到本文目的,请留言. 1 环境准备 1.1 软件准备 idea:官方下载社区版,下载后安装 maven:Apache- ...

  6. input file样式美化

    默认样式: <input type="file" /> 美化样式时: 将其设置为透明,设置宽高覆盖到需要用的地方,宽100%,高100% 可以用到定位 .box{ po ...

  7. angular开发中的两大问题

    一.在我们的angular开发中,会请求数据但轮播图等...在请求过数据后他的事件和方法将不再执行: 看我们的解决方案一: app.controller("text",functi ...

  8. h5 简单拖放

    最新的HTML5标准为所有的html元素规定了一个draggable属性,它表明了元素是否可以拖动,默认情况下,图像,链接,选中的文字是可以拖动的,因为他们的draggable属性被自动设置为true ...

  9. BootstrapValidator超详细教程

    一.引入必要文件 下载地址:(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip) <link rel=&qu ...

  10. 开博缘由 , 可点下看看 http://www.cnblogs.com/jshare

    记录日常用中用到.遇到的问题 实现过程,仅供参考 不定时更新 ------------------- 之前看过一个文章,大概说的是开发和用到的过的代码,可以提取出一些代码片段,长时间下来,你会发现部分 ...