【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 = ...
随机推荐
- day09内存管理
复习 ''' 文件处理 1.操作文件的三步骤 -- 打开文件:硬盘的空间被操作系统持有 | 文件对象被应用程序持续 -- 操作文件:读写操作 -- 释放文件:释放操作系统对硬盘空间的持有 2.基础的读 ...
- Java基础实训2
1. 一维数组的创建和遍历. 声明并创建存放4个人考试成绩的一维数组,并使用for循环遍历数组并打印分数.要求: (1) 首先按“顺序”遍历,即打印顺序为:从第一个人到第四个人: (2) ...
- 论文笔记:Auto-ReID: Searching for a Part-aware ConvNet for Person Re-Identification
Auto-ReID: Searching for a Part-aware ConvNet for Person Re-Identification 2019-03-26 15:27:10 Paper ...
- webpack创建页面的过程
1.项目文件夹中创建各类型文件放置的文件夹,如:iTestingWeb文件夹下创建src dist文件夹,用途:src为源码 dist为生成后的文件放置位置,然后在源码文件夹中进一步按文件类型增加文件 ...
- js打印html指定元素,解决动态获取的图片无法打印问题
用js来调用浏览器的打印接口很容易,一两行代码就能搞定,但是有些数据是通过动态生成的,例如一些动态生成的二维码,有时候调用打印接口图片会无法显示 为了解决这个问题,建议使用下面这个库 下载:https ...
- Inception部署
Inception是集审核.执行.回滚于一体的一个SQL自动化运维系统,基于MySQL代码修改,官方文档地址:https://mysql-inception.github.io/inception-d ...
- Xilinx Vivado的使用详细介绍(5):调用用户自定义封装的IP核
Zedboard OLED Display Controller IP v1 介绍 Author:zhangxianhe 本文档提供了快速添加,连接和使用ZedboardOLED v1.0 IP内核的 ...
- Linux下安装docker
//安装docker //需要输入时 输y就可以yum install -y epel-releaseyum install docker-io # 加入开机启动chkconfig docker on ...
- object的wait()、notify()、notifyAll()、方法和Condition的await()、signal()方法
wait().notify()和notifyAll()是 Object类 中的方法 从这三个方法的文字描述可以知道以下几点信息: 1)wait().notify()和notifyAll()方法是本地方 ...
- (23)socket多进程并发
# 对于服务器自己本身,一个程序只能绑定一个端口 # 同一个端口可以多个客户端来连接, # 只要server_ip+ server_port +client_ip + cilent_port 不一样, ...