webpack热更新原理介绍

最新推荐文章于 2024-04-19 08:54:56 发布

前端程序猿dzf

最新推荐文章于 2024-04-19 08:54:56 发布

阅读量1.1k

点赞数 1

分类专栏：前端干货 webpack 文章标签： node.js

本文链接：https://blog.csdn.net/qq398577351/article/details/108637637

版权

webpack热更新原理

1、什么是HMR
2、搭建HMR项目
3、热更新流程图
3、项目文件
4.手写实现webpack-dev-server.js
5、编写客户端更新模块webpackHotDevClient
6、总结
* 集成 Socket.IO介绍（只是普及和上面无关）

1、什么是HMR

Hot Module Replacement是指当你对代码修改并保存后，webpack将会对代码进行新打爆，并将新的模块发送到浏览器端。
相对于live reload 刷新页面的方案， HMR的有点在于保存应用的状态，提高开发效率。

2、搭建HMR项目

在这里插入图片描述
1、需要 cnpm i webpack webpack-cli webpack-dev-server html-webpack-plugin express socket.io events -S

// package.json
{
   
  "name": "15.hmr",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
   
    "express": "^4.17.1"
  },
  "dependencies": {
   
    "express": "^4.17.1",
    "html-webpack-plugin": "^4.4.1",
    "mime": "^2.4.6",
    "socket.io": "^2.3.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

项目结构
在这里插入图片描述

3、热更新流程图

在这里插入图片描述

3、项目文件

// webpack.config
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
   
  mode: "development",
  entry: "./src/index.js",
  output: {
   
    filename: "main.js",
    path: path.join(__dirname, "dist"),
  },
  devServer: {
   
    hot: true,
    contentBase: path.join(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
   
      template: "./src/index.html",
      filename: "index.html",
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
};

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack热更新</title>
</head>

<body>
    <div id="root"></div>
    <script src="/socket.io/socket.io.js"></script>
</body>

</html>

// 入口文件:

// src/title.js
module.exports = 'title7';

// src/index.js  // 入口文件
import '../webpackHotDevClient';
let root = document.getElementById("root");
function render() {
   
  let title = require("./title");
  root.innerHTML = title;
}
render(); // 渲染页面用


i

最低0.47元/天解锁文章

前端程序猿dzf

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack热更新原理介绍

webpack热更新原理1、什么是HMR2、搭建HMR项目3、热更新流程图3、项目文件4.手写实现webpack-dev-server.js5、编写客户端更新模块webpackHotDevClient6、总结* 集成 Socket.IO介绍（只是普及和上面无关）1、什么是HMRHot Module Replacement是指当你对代码修改并保存后，webpack将会对代码进行新打爆，并将新的模块发送到浏览器端。相对于live reload 刷新页面的方案， HMR的有点在于保存应用的状态，提高开
复制链接

扫一扫