webpack 模块热更新 Hot Module Replacement

最新推荐文章于 2022-05-08 23:12:37 发布
最新推荐文章于 2022-05-08 23:12:37 发布
阅读量283 收藏
点赞数
文章标签： webpack javascript json ViewUI
原文链接：https://juejin.im/post/5c8e7b1df265da681a02f82c
版权

webpack 模块热更新 Hot Module Replacement

GitHub 学习 Demo。

Hot Module Replacement (简称 HMR) 是一个由 webpack 提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而不需要完全刷新。

意思就是，部分的代码更新。而不是重新编译后刷新。

这篇文章关注的是功能的实现。如果想了解热更新的实现原理，请点击链接。

warnning ： 本指南中的工具仅用于开发，请避免在生产中使用它们！

启用 HMR

这个功能可以大大提升你的开发效率。在下面的例子中，将会去除 print.js 的入口,直接由 index.js 使用。

tips:
如果你是使用 webpack-dev-middleware 中间件 来搭建开发服务器的话，请添加 webpack-hot-middleware 中间件来开启 HMR。

修改项目
# webpack.config.js

 const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
+ const webpack = require('webpack');

  module.exports = {
    entry: {
-      app: './src/index.js',
-      print: './src/print.js'
+      app: './src/index.js'
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
+     hot: true
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Hot Module Replacement'
      }),
+     new webpack.HotModuleReplacementPlugin()
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };
复制代码

然后修改 index.js，从而当 print.js 发生变化，我们告诉 webpack 去接受这个已更新的 module。

# src/index.js

import _ from 'lodash';
  import printMe from './print.js';

  function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;

    element.appendChild(btn);

    return element;
  }

  document.body.appendChild(component());
+
+ if (module.hot) {
+   module.hot.accept('./print.js', function() {
+     console.log('Accepting the updated printMe module!');
+     printMe();
+   })
+ }
复制代码
运行项目
npm start
# npx webpack-dev-server --config webpack.config.js
复制代码

运行项目后，尝试修改print.js中console.log输出的内容, 然后你会发现，每当模块更新后，浏览器的控制台都会输出新的内容。 说明新的改动已被 webpack 加载。

[WDS] App updated. Recompiling...
client:243 [WDS] App hot update...
index.js:24 Accepting the updated printMe module!
复制代码

但是，你会发现再点击按钮还是输出原来的内容。别急，后面会让这部分也更新。

webpack-dev-server 的 Node API 用法

当你使用这种方式搭建你的开发环境的时候。不要在 webpack 的配置对象中声明 devServer 选项。而且需要显示的调用 webpack-dev-server 包下的 addDevServerEntrypoints 方法声明 webpack 的入口文件。

# server.js

const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');

const config = require('./webpack.config.js');
const options = {
  contentBase: './dist',
  hot: true,
  host: 'localhost'
};

webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);

server.listen(5000, 'localhost', () => {
  console.log('dev server listening on port 5000');
});
复制代码

tips:
如果你是使用 webpack-dev-middleware 中间件 来搭建开发服务器的话，请添加 webpack-hot-middleware 中间件来开启 HMR。

Gotchas

Hot Module Replacement 可能很棘手。刚的例子未解决的问题是，模块更新后，点击按钮还是输出旧的内容。

这是因为，这是 DOM 元素依旧绑定的是旧的方法。。。。

解决方法之一是，手动更新 DOM 事件绑定的方法:

# src/index.js

  import _ from 'lodash';
  import printMe from './print.js';

  function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;  // onclick event is bind to the original printMe function

    element.appendChild(btn);

    return element;
  }

- document.body.appendChild(component());
+ let element = component(); // Store the element to re-render on print.js changes
+ document.body.appendChild(element);

  if (module.hot) {
    module.hot.accept('./print.js', function() {
      console.log('Accepting the updated printMe module!');
-     printMe();
+     document.body.removeChild(element);
+     element = component(); // Re-render the "component" to update the click handler
+     document.body.appendChild(element);
    })
  }
复制代码

但这样显得很麻烦。后面会提到一些 loaders 可以让我们更方便的使用 HMR。

样式表的 HMR

CSS 的 Hot Module Replacement 实际上是依赖 style-loader 的帮助。当 CSS 依赖更新的时候，这个 loader 通过 module.hot.accept 在幕后更新 <style> 标签。

安装依赖
npm install --save-dev style-loader css-loader
复制代码
修改项目
  webpack-demo
  | - package.json
  | - webpack.config.js
  | - /dist
    | - bundle.js
  | - /src
    | - index.js
    | - print.js
+   | - styles.css

# src/styles.css

body {
  background: blue;
}

# index.js

  import _ from 'lodash';
  import printMe from './print.js';
+ import './styles.css';

  function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;  // onclick event is bind to the original printMe function

    element.appendChild(btn);

    return element;
  }

  let element = component();
  document.body.appendChild(element);

  if (module.hot) {
    module.hot.accept('./print.js', function() {
      console.log('Accepting the updated printMe module!');
      document.body.removeChild(element);
      element = component(); // Re-render the "component" to update the click handler
      document.body.appendChild(element);
    })
  }

# webpack.config.js

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-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 CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Hot Module Replacement'
      }),
      new webpack.HotModuleReplacementPlugin()
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };
复制代码

你会发现，当你修改样式表后，浏览器中页面的样式已经变化了。

使用 loaders 便捷使用 HMR

  • React Hot Loader: Tweak react components in real time.
  • Vue Loader: This loader supports HMR for vue components out of the box.
  • Elm Hot Loader: Supports HMR for the Elm programming language.
  • Angular HMR: No loader necessary! A simple change to your main NgModule file is all that's required to have full control over the HMR APIs.

更多阅读

NEXT

后面我们将探讨如何利用 webpack 来对项目进行各种的优化。第一个讲解 Tree Shaking 摇树处理。

转载于:https://juejin.im/post/5c8e7b1df265da681a02f82c

weixin_34066347
关注
webpack入门之模块热替换(hot module replacement)
蛐蛐的博客
07-31 464
文档：https://webpack.js.org/concepts/hot-module-replacement/ 1.简介 模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度： 保留在完全重新加载页面时丢失的应用程序状态。 只更新变更内容，以节省宝贵的开发时间。 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。 下面需要了解它是如何运行的
【前端知识之webpack】webpack的热更新
weixin_44337386的博客
07-18 3139
本系列主要整理前端面试中需要掌握的知识点。本节介绍webpack的热更新。
Webpack：Hot Module Replacement 热模块更新
oiaa的博客
03-20 2130
HMR功能好处 方便调试css，页面不会刷新 热更新js要手动刷新 开启HMR功能 webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clea...
webpack Hot Module Replacement 热模块替换
purple_lumpy的博客
07-08 1188
我们先改一下 index.js 文件。如下。 import './style.css'; var button = document.createElement('button'); button.innerHTML = "新增"; document.body.appendChild(button); button.onclick = function() { var div = do...
【webpack】五、Hot Module Replacement热模块更新
CousinChen的博客
01-30 1086
Hot Module Replacement 热模块更新 文章目录Hot Module Replacement 热模块更新1. Hot Module Replacement的css案例2. Hot Module Replacement的配置3. Hot Module Replacement的js案例 热模块替换，通常简写为hmr，能够在不刷新页面、不影响其他模块功能的情况下，热更新你本次修改的内容。 本文将通过两个个简单的案例介绍一下hmr 1. Hot Module Replacement的css案例 先
Hot Module Replacement热更新（webpack学习篇9）
Riona_cheng的博客
09-03 566
webpack中的热更新
Webpack--模块热替换（HMR）
xuan的博客
05-08 1489
一、概述 （1）live reload 只要检测到代码改动就会自动重新构建，然后触发网页刷新 （2）webapack中的模块热替换 可以让代码在页面不刷新的前提下得到最新的改动，甚至不需要重新发起请求就能看到更新后的效果。 二、开启HMR （1）HMR是需要手动开启的，并且有一些必要条件。 （2）确保项目是基于webpack-dev-server或webpack-dev-middle进行开发的，webpack本身的命令行并不支持HMR。 const webpack = require('w
webpack 模块热替换原理
08-27
Webpack 模块热替换原理是通过 Hot Module Replacement(HMR) 实现的，该技术可以在不刷新页面的情况下实时更新模块。HMR 是基于 Webpack Dev Server(WDS) 的，通过 style-loader 可以实现无刷新更新样式，但是对于 ...
WebpackDevServer 和 Hot Module Replacement(热更新)
weixin_52139966的博客
06-21 1977
一.WebpackDevServer 每次的代码修改都需要重新编译打包，刷新浏览器，特别麻烦，我们可以通过安装 webpackDevServer 来改善这方面的体验. 1.安装: npm install --save-dev webpack-dev-server
webpack源码分析之六：hot module replacement
weixin_34268610的博客
12-31 663
前言 在web开发中，webpack的hot module replacement(HMR)功能是可以向运行状态的应用程序定向的注入并更新已经改变的modules。它的出现可以避免像LiveReload那样，任意文件的改变而刷新整个页面。 这个特性可以极大的提升开发拥有运行状态，以及资源文件普遍过多的前端应用型网站的效率。完整介绍可以看官...
[译] Webpack 用来做模块热替换(hot module replacement)
weixin_33894992的博客
10-18 135
翻译地粗糙, 英文好请直接看原文 原文 https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack 注意模块热替换(HMR)依然是试验性的功能 介绍 模块热替换(HMR)交换, 添加, 或者删除模块, 同时应用持续运行, 不需要页面刷新. 准备工作 ...
webpack手册-09-Hot Module Replacement
uikoo9的专栏
12-06 638
Hot Module Replacement 热更新，由于大型项目开发中会有很多组件，如果开发某个组件时，每次修改都刷新页面，一方面比较耗时，一方面比较慢，热更新会只刷新你修改的组件，在开发时算是比较有用，不过非大型项目刷新页面和hmr感知差不多 Enabling HMR 开启热更新功能，在webpack配置文件中的devServer中添加hot:true即可， webpack-dev-server在4.0.0版本后默认会开启，看了下目前已经是4.5.0版本了，所以不修改配置文件也是默认...
24、webpack优化(9)——热更新
2024路在何方
02-12 594
热更新 所谓的热更新指的是对数据变化的局部进行更新，而不进行页面刷新。 热更新配置 在devServer中开启hot配置为true 添加两个webpack的内置插件，分别为new webpack.NamedModulesPlugin()和new webpack.HotModuleReplacementPlugin(),前者用于打印更新的模块路径，告诉我们哪个模块热更新了；后者是热更新插件。 ...
[HMR] Hot Module Replacement is disabled.
weixin_34395205的博客
08-30 616
webpack配置 let path = require('path'); let htmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); const CleanWebpackPlugin ...
vue组件间通信技巧--父子组件，兄弟组件，隔代组件
haoyanyu_的博客
07-15 758
1. 父子组件 方法一： 父组件传递参数给子组件通过props如下： // 父组件 <template> <div> <hello-world msg="hello world"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue'; export default { name: 'App', co
出现安装模块（module）报错或者安装不了模块（module）的处理方法
成长过程
10-30 6824
Pycharm用户的可看全部的处理过程 一、出现模组错误 Import Error: No module named ‘模块名’ 上面只是我手打的，因为我的问题已解决所以暂时没了图片。 二、处理方法 （1）、先安装： 方法一：用Pycharm自带的安装 在File里找到Settings如下图所示： 然后在Settings中找到Project下的Python Interpreter再点击右边的加号如下图所示： 点击“+”后在搜索框中搜索需要安装的模块，点击Install Package 在Insta
Uncaught Error: [HMR] Hot Module Replacement is disabled.
开发路上的AZhe
10-23 463
在plugins加new webpack.HotModuleReplacementPlugin(),//模块热替换插件HMR是简称 （基本是版本问题） plugins:[ new webpack.HotModuleReplacementPlugin(), ]
webpack热更新无效解决,页面无刷新
超级婷
02-15 8527
问题：控制台输出, 但页面内容并没有进行热加载 [WDS] App updated. Recompiling... [WDS] App hot update... ... 报错：  Error: Cannot find module 'webpack-cli/bin/config-yargs' at Function.Module._resolveFilename (intern...
webpack hot-module-replacement 原理&踩坑
weixin_33739541的博客
08-22 537
webpack hot-module-replacement 原理&踩坑 起因 最近在做san框架的热更新，记录一下webpack HMR的原理和小坑。 什么是HMR？ 热更新是webpack的一个特性，通过无刷新实现代码更新。 在HMR之前，大多数开发体验是live reload，保存后自动刷新浏览器，已经是比刀耕火种的年代强很...
webpack 的热更新原理
最新发布
08-05
回答: Webpack的热更新是通过Webpack Dev Server和WebSocket连接实现的。Webpack监听源代码的变化，将更新的模块信息发送给浏览器，浏览器使用HMR Runtime将新的模块代码插入到应用程序中，从而实现热更新的效果。具体来说，Webpack Dev Server是一个基于Express的小型Node.js服务器，它集成了Webpack，并提供了热模块替换（Hot Module Replacement）功能。在Webpack的配置文件中，通过设置devServer选项的hot属性为true，开启了热更新特性。当源代码发生变化时，Webpack会将更新的模块信息通过WebSocket连接发送给浏览器，浏览器接收到更新的模块信息后，使用HMR Runtime将新的模块代码插入到应用程序中，从而实现热更新的效果。这样，在开发过程中，我们可以实时地看到代码的变化效果，提高开发效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值