【webpack学习笔记】a05-模块热替换
什么是模块热替换?
这个功能会在程序运行过程中替换、添加或删除模块,而无需重新加载整个页面
有什么用呢?
- 保留在完全重新加载页面时丢失的应用程序状态.
- 只更新变更内容,以节省宝贵的开发时间。
调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。
总而言之,它最主要的速度就是加快开发速度。
启用模块热更新这个功能需要更新webpack-dev-server
的配置和使用webpack内置的HMR插件。
例子:
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); //引入
module.exports = {
entry: {
app: './src/index.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase:'./dist',
hot: true
},
module:{
rules:[
{
test: /\.css$/,
use:['style-loader','css-loader']
}
]
},
plugins:[
new HtmlWebpackPlugin({
title: 'Output Management'
}),
//方便查看修补依赖
new webpack.NamedModulesPlugin(),
//热更新模块
new webpack.HotModuleReplacementPlugin()
],
output:{
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
同时,也要在index.js中判断热模块更新后做处理:
import _ from 'lodash';
import printMe from './print.js';
import './style.css';
function component(){
var element = document.createElement('div');
var btn = document.createElement('button');
element.innerHTML = _.join(['hello~world','我的家'], ' ');
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe;
element.appendChild(btn);
return element;
}
let element = component();
document.body.appendChild(element);
if(module.hot){
module.hot.accept('./print.js', function(){
console.log('更新后:');
document.body.removeChild(element);
element = component();
document.body.appendChild(element);
})
}
【webpack学习笔记】a05-模块热替换的更多相关文章
- Webpack 开发工具与模块热替换
Webpack 开发工具与模块热替换 ⚠️ 注意: 永远不要在生产环境中使用这些工具,永远不要. devtool 当 JavaScript 异常抛出时,你常会想知道这个错误发生在哪个文件的哪一行.然 ...
- webpack学习_模块热替换(Hot Module Peaplacement)
模块热替换(Hot Module Replacement 或 HMR) 是webpack提供的最有用的功能之一.允许在u女性是更新各种模块,而无需进行完全刷新. 启用HMR 承接之前的代码 webpa ...
- webpack学习之—— 模块热替换(Hot Module Replacement)
模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换.添加或删除模块,而无需重新加载整个页面.主要是通过以下几种方式,来显著加快开发速度: 保留在完全重 ...
- 【webpack】-- 模块热替换
全称是Hot Module ReplaceMent(HMR),理解成热模块替换或者模块热替换都可以吧,和.net中的热插拔一个意思,就是在运行中对程序的模块进行更新.这个功能主要是用于开发过程中,对生 ...
- 启用 webpack 的模块热替换特性
启用 webpack 的模块热替换特性: module.exports = { //... devServer: { hot: true } } 注意,必须有 webpack.HotModuleRep ...
- webpack 模块热替换的理解和使用
模块热替换(webpack文档上也叫 Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一.它允许在运行时更新各种模块,而无需进行完全刷新. 这句话其实 ...
- Webpack探索【8】--- 模块热替换详解
本文主要讲模块热替换相关内容.
- 【webpack学习笔记】a06-生产环境和开发环境配置
生产环境和开发环境的配置目标不一样,生产环境主要是让文件压缩得更小,更优化资源,改善加载时间. 而开发环境,主要是要开发更方便,更节省时间,比如调试比如自动刷新. 所以可以分开配置不同的开发环境,然后 ...
- webpack学习笔记--整体配置结构
之前的章节分别讲述了每个配置项的具体含义,但没有描述它们所处的位置和数据结构,下面通过一份代码来描述清楚: const path = require('path'); module.exports = ...
随机推荐
- CSS3之calc()和box-sizing属性
box-sizing 属性 规定两个并排的带边框的框: 例子: box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素. 例如,假如您需要并排放置两个带边框的框,可通过将 box-si ...
- 如何使用postman传数组数据
如何使用postman传数组数据 在我们做api接口数据调试的时候,大部分是会用到postman的,一般请求数据的参数都是字符串,但是特殊情况下我们是需要传一个数组数据的,那么为了实现这种需求,究竟该 ...
- HDU 5919 Sequence II(主席树)题解
题意:有A1 ~ An组成的数组,给你l r,L = min((l + ans[i - 1]) % n + 1, (r + ans[i - 1]) % n + 1),R = max((l + ans[ ...
- sqllite中实现字符串分割
WITH split(word, str) AS ( -- alternatively put your query here -- SELECT '', category||',' FR ...
- 20175312 2018-2019-2 《Java程序设计》第7周学习总结
20175312 2018-2019-2 <Java程序设计>第7周学习总结 教材学习内容总结 已依照蓝墨云班课的要求完成了第八章的学习,主要的学习渠道是PPT,和书的课后习题. 总结如下 ...
- 加sogou 和wps
刚装完系统,装常用工具: sogoupinyin / wps linux ==========sogoupinyin=========================1.sogou linux 下载d ...
- Python汉诺塔
import turtle class Stack: def __init__(self): self.items = [] def isEmpty(self): return len(self.it ...
- vue引入JQ的方法
在vue中引入jq 用vue-cli脚手架工具构建项目成功后 当需要引入JQ,可用以下方法: 1.首先在package.json里的 dependencies加入"jquery" ...
- Java内存模型探秘
1.Java内存模型概述 Java内存模型是一种抽象概念,不是真实存在的.主要定义了程序中各个变量的访问规则,即在虚拟机中将变量存储到内存和从内存取出变量这样的底层细节.注意:这里的变量仅包括实例字段 ...
- js原生实现网页广告条飞舞的效果
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...