Hot Module Replacement [热模块替换]
安装了webpack-dev-server后 , 配置 "start": "webpack-dev-server" 然后运行 npm start 会开起一个web服务。
这时当我们的代码发生变化时,浏览器会自动刷新,显示变更后的代码所展示的内容。但是,这种情况下会将没有发生改变的部分也刷新,也就是全局刷新。如果想做到局部刷新,就需要 Hot Module Replacement [热模块替换]的支持。
const webpack = require('webpack') module.exports = {
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist', // 在哪个目录下开启web服务
port: 3000,
open: true, // 自动打开浏览器
hot: true, // 开启热模块替换功能
hotOnly: true // 如果开启的热模块替换功能失效,不额外做其他事情,只是刷新一下页面
},
}
当你写完这些配置后去更改css样式时,会发现热模块替换已经有效果了。但是,当我们修改,js文件时会发现修改的内容没有在页面上显示。这是因为,css-loader 帮我们做了一些事情。
if (module.hot) {
module.hot.accept('xxx.css', () => {
// ...
})
}
如果项让js文件也实现热模块替换,也需要编写相应的逻辑。
index.js
import Counter from './counter'
import Numb from './number' Counter()
Numb() if (module.hot) {
module.hot.accept('./number', () => {
var nu = document.getElementById('nu')
document.body.removeChild(nu)
Numb()
})
}
counter.js
function counter() {
var div = document.createElement('div')
div.setAttribute('id', 'co')
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', 'nu')
div.innerHTML = 2000
document.body.appendChild(div)
} export default number
Hot Module Replacement [热模块替换]的更多相关文章
- Webpack & The Hot Module Replacement热模块替换原理解析
Webpack & The Hot Module Replacement热模块替换原理解析 The Hot Module Replacement(HMR)俗称热模块替换.主要用来当代码产生变化 ...
- webpack摸索(一)webpack-dev-server热模块替换
webpack-dev-server 是生成在内存中的 本地开发: index.html <!DOCTYPE html> <html lang="en"> ...
- 前端技术之:webpack热模块替换(HMR)
第一步:安装HMR中间件: npm install --save-dev webpack-hot-middleware 第二步:webpack配置中引入webpack对象 const we ...
- webpack-Hot Module Replacement(热更新)
模块热替换(Hot Module Replacement) 模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换.添加或删除模块,而无需重新加载整个页面 ...
- webpack学习之—— 模块热替换(Hot Module Replacement)
模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换.添加或删除模块,而无需重新加载整个页面.主要是通过以下几种方式,来显著加快开发速度: 保留在完全重 ...
- webpack中热模块更新
Hot Module Replacement,热模块更新,很多时候会简写成HMR. "scripts": { "start": "webpack-de ...
- webpack的Hot Module Replacement运行机制
使用webpack打包,难免会使用Hot Module Replacement功能,该功能能够实现修改.添加或删除前端页面中的模块代码,而且是在页面不刷新的前提下.它究竟是怎么运作的呢?本文主要从调试 ...
- Webpack 2 视频教程 020 - Webpack 2 中的 HMR ( Hot Module Replacement )
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- webpack——Modules && Hot Module Replacement
blog:JavaScript Module Systems Showdown: CommonJS vs AMD vs ES2015 官网链接: Modules 官网链接:Hot Module Rep ...
随机推荐
- js遍历传参到html
<p id="subp" hidden><button id= "upsub"shiro:hasPermission="sys:me ...
- java使用bitmap求两个数组的交集
一般来说int代表一个数字,但是如果利用每一个位 ,则可以表示32个数字 ,在数据量极大的情况下可以显著的减轻内存的负担.我们就以int为例构造一个bitmap,并使用其来解决一个简单的问题:求两个数 ...
- $.isEmptyObject() 判断对象是否为空
$.isEmptyObject(obj):为空 返回true不为空 返回 false: isEmptyObject: function( obj ) { var name; for ( name in ...
- C语言:计算并输出S=1+(1+2^0.5)+(1+2^0.5+3^0.5)...+(1+2^0.5+3^0.5+...+n^0.5)
//计算并输出S=1+(1+2^0.5)+(1+2^0.5+3^0.5)...+(1+2^0.5+3^0.5+...+n^0.5) #include<math.h> #include< ...
- 计算机二级-C语言-程序设计题-190112记录-结构体的遍历和结构体的数据的交换处理,文件的操作。
//程序设计题:学生的记录由学号和成绩组成,N名学生的数据已在主函数中放入结构体数组s中,请编写函数fun,它的功能是:把分数低的学生数据放在b所指的数组中,注意:分数最低的学生可能不止一个,函数返回 ...
- SQL 层级数据查询出树形状态
WITH TEST AS (SELECT DEPTID,PARENTDEPT,SORTORDER,1 SPAC,CONVERT(CHAR(200),RTRIM(DEPTID)+CONVERT(CHA ...
- 【笔记4-商品模块】从0开始 独立完成企业级Java电商网站开发(服务端)
分类管理模块 数据表结构设计 分类表 CREATE TABLE.mmall_ category' ( 'id' int(11) NOT NULL AUTO_ INCREMENT COMMENT ' 类 ...
- python opencv:像素操作
图片的像素 像素:组成图片的单位 RGB:颜色由 RGB三种颜色组成 颜色深度:对于8bit的颜色深度来说,它可以表示的颜色范围是 0 ~ 255,对于RGB图片来说,8位颜色深度可以表示 (2^8) ...
- 手把手教你使用Hexo+GitHub搭建自己的个人博客网站
安装nodejs环境 这个直接搜索安装即可,安装完成之后,通过如下命令检测环境变量是否安装成功: λ node -v # 输出版本号 v12.13.1 正确输入版本号即可. 安装cnpm cnpm是淘 ...
- vs的一些操作技巧:在写代码时自动换行的设置
有时在写代码的时候,一行代码太长了,想换行,直接按回车键的话又会报错,怎么办?其实可以这样设置vs,就可以达到自动换行的效果啦.