什么是模块热替换?

这个功能会在程序运行过程中替换、添加或删除模块,而无需重新加载整个页面

有什么用呢?

  • 保留在完全重新加载页面时丢失的应用程序状态.
  • 只更新变更内容,以节省宝贵的开发时间。

    调整样式更加快速
  • 几乎相当于在浏览器调试器中更改样式。

总而言之,它最主要的速度就是加快开发速度。


启用模块热更新这个功能需要更新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-模块热替换的更多相关文章

  1. Webpack 开发工具与模块热替换

    Webpack 开发工具与模块热替换 ​⚠️ 注意: 永远不要在生产环境中使用这些工具,永远不要. devtool 当 JavaScript 异常抛出时,你常会想知道这个错误发生在哪个文件的哪一行.然 ...

  2. webpack学习_模块热替换(Hot Module Peaplacement)

    模块热替换(Hot Module Replacement 或 HMR) 是webpack提供的最有用的功能之一.允许在u女性是更新各种模块,而无需进行完全刷新. 启用HMR 承接之前的代码 webpa ...

  3. webpack学习之—— 模块热替换(Hot Module Replacement)

    模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换.添加或删除模块,而无需重新加载整个页面.主要是通过以下几种方式,来显著加快开发速度: 保留在完全重 ...

  4. 【webpack】-- 模块热替换

    全称是Hot Module ReplaceMent(HMR),理解成热模块替换或者模块热替换都可以吧,和.net中的热插拔一个意思,就是在运行中对程序的模块进行更新.这个功能主要是用于开发过程中,对生 ...

  5. 启用 webpack 的模块热替换特性

    启用 webpack 的模块热替换特性: module.exports = { //... devServer: { hot: true } } 注意,必须有 webpack.HotModuleRep ...

  6. webpack 模块热替换的理解和使用

    模块热替换(webpack文档上也叫 Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一.它允许在运行时更新各种模块,而无需进行完全刷新. 这句话其实 ...

  7. Webpack探索【8】--- 模块热替换详解

    本文主要讲模块热替换相关内容.

  8. 【webpack学习笔记】a06-生产环境和开发环境配置

    生产环境和开发环境的配置目标不一样,生产环境主要是让文件压缩得更小,更优化资源,改善加载时间. 而开发环境,主要是要开发更方便,更节省时间,比如调试比如自动刷新. 所以可以分开配置不同的开发环境,然后 ...

  9. webpack学习笔记--整体配置结构

    之前的章节分别讲述了每个配置项的具体含义,但没有描述它们所处的位置和数据结构,下面通过一份代码来描述清楚: const path = require('path'); module.exports = ...

随机推荐

  1. CSS3之calc()和box-sizing属性

    box-sizing 属性 规定两个并排的带边框的框: 例子: box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素. 例如,假如您需要并排放置两个带边框的框,可通过将 box-si ...

  2. 如何使用postman传数组数据

    如何使用postman传数组数据 在我们做api接口数据调试的时候,大部分是会用到postman的,一般请求数据的参数都是字符串,但是特殊情况下我们是需要传一个数组数据的,那么为了实现这种需求,究竟该 ...

  3. 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[ ...

  4. sqllite中实现字符串分割

    WITH split(word, str) AS (    -- alternatively put your query here    -- SELECT '', category||',' FR ...

  5. 20175312 2018-2019-2 《Java程序设计》第7周学习总结

    20175312 2018-2019-2 <Java程序设计>第7周学习总结 教材学习内容总结 已依照蓝墨云班课的要求完成了第八章的学习,主要的学习渠道是PPT,和书的课后习题. 总结如下 ...

  6. 加sogou 和wps

    刚装完系统,装常用工具: sogoupinyin / wps linux ==========sogoupinyin=========================1.sogou linux 下载d ...

  7. Python汉诺塔

    import turtle class Stack: def __init__(self): self.items = [] def isEmpty(self): return len(self.it ...

  8. vue引入JQ的方法

    在vue中引入jq 用vue-cli脚手架工具构建项目成功后 当需要引入JQ,可用以下方法: 1.首先在package.json里的 dependencies加入"jquery" ...

  9. Java内存模型探秘

    1.Java内存模型概述 Java内存模型是一种抽象概念,不是真实存在的.主要定义了程序中各个变量的访问规则,即在虚拟机中将变量存储到内存和从内存取出变量这样的底层细节.注意:这里的变量仅包括实例字段 ...

  10. js原生实现网页广告条飞舞的效果

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...