实时预览和热更新html

书中枫叶

于 2023-08-14 14:37:39 发布

阅读量524

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/html0010/article/details/132275606

版权

在这里插入图片描述

当涉及到前端开发中的实时预览和热更新，Webpack 是一个强大的工具，它提供了热模块替换（Hot Module Replacement，HMR）功能，我们可以在不刷新整个页面的情况下，实时查看代码的修改。如何在项目中配置和使用Webpack的HMR功能，以实现实时预览和热更新效果。

什么是热模块替换（HMR）？

热模块替换（HMR）是一种前端开发工具，它允许在不刷新整个页面的情况下，更新代码和资源。这意味着你可以在修改代码时立即看到效果，而不需要等待整个页面重新加载。HMR 将只更新修改过的模块，而保留应用程序的状态。

热更新有什么好处

热更新（Hot Module Replacement，HMR）是一个在开发过程中非常有用的功能，尤其在大型复杂的项目中。尽管在某些情况下可能觉得很难察觉到它的优势，但实际上它可以提供一些重要的好处：

实时预览：在开启热更新的情况下，你可以在不刷新整个页面的情况下实时查看代码的更改。这可以极大地提高开发效率，节省刷新页面的时间。
保持应用状态： HMR 允许在修改代码时保持应用程序的状态。如果你在应用程序中已经执行了某些操作（例如填写表单、展开折叠菜单等），在代码更新后，这些状态将被保留下来，而不会像刷新整个页面那样丢失。
快速反馈循环： HMR 可以在你修改代码后立即显示结果，这有助于快速迭代和调试。
无需手动刷新：在热更新开启的情况下，你无需手动刷新浏览器，这在大项目中特别有用。
模块级别更新： HMR 不仅仅局限于 JavaScript 文件，还可以应用于 CSS、模板等资源，以及你可能在项目中使用的其他模块。

配置Webpack以启用HMR

首先，确保你的项目已经使用Webpack进行配置。如果你还没有配置Webpack，可以使用以下步骤开始：

在项目根目录中创建一个 package.json 文件，如果还没有的话，使用以下命令初始化：

npm init -y

安装Webpack及其相关依赖：

npm install webpack webpack-cli webpack-dev-server --save-dev

在项目根目录下创建一个 src 文件夹，并在其中创建一个 index.html 和 index.js 文件作为入口文件。
在项目根目录下创建一个 webpack.config.js 文件来配置Webpack：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development', // 设置开发环境
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    devServer: {
        hot: true,
        port: 3000 // 使用不同的端口号
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html' // 输出的 HTML 文件名
        })
    ]
};

在上述配置中，我们启用了 hot: true，这将启用Webpack Dev Server的HMR功能。

编写实时预览的代码

在入口文件 src/index.html 中，添加一些简单的代码来测试HMR。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack 实时预览</title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: #0e59c7;
        }

        p {
            color: #0e59c7;
            font-family: 华文楷体;
            font-size: 2rem;
        }
    </style>
</head>
<body>

</body>
</html>

在入口文件 src/index.js 中，也可以添加一些简单的代码来测试HMR。例如：

function component() {
    const element = document.createElement('h1');
    element.textContent = 'Hello, Webpack 热更新!';
    return element;
}

function component2() {
    const element = document.createElement('p');
    element.textContent = 'Webpack Dev Server 热更新将会触发浏览器的局部自动刷新，以加载最新的文件内容，更新页面显示。这将让你一边修改代码，一边看到实时的效果，就像是在刷新页面一样。';
    return element;
}

document.body.appendChild(component());
document.body.appendChild(component2());

运行Webpack Dev Server

在package.json中添加启动命令

 "scripts": {
    "start": "webpack serve --open"
  },

打开终端输入命令

npm start

现在，当修改 src/index.js 文件中的代码时，Webpack Dev Server 将会自动检测变化并触发热更新。你会看到浏览器中的页面立即更新，而不需要手动刷新。

总结

通过配置Webpack和使用其热模块替换（HMR）功能，可以在前端开发过程中实现实时预览和热更新。这大大提高了开发效率，可以在修改代码时立即看到效果，而不需要等待整个页面重新加载。Webpack Dev Server的HMR功能使得前端开发更加流畅和高效。

最后

可以改变 hot: false 来尝试一下就会发现直接去修改html 文件可以浏览器自动刷新的功能

  devServer: {
        hot: false,
        port: 3000 // 使用不同的端口号
    },

其他自动刷新技术

Browsersync 是一个用于开发的工具，它可以在多个浏览器中同步显示你的应用程序，并自动刷新页面。它支持 HTML、CSS 和 JavaScript 的自动刷新。
安装 Browsersync：

npm install browser-sync --save-dev

在项目根目录下创建一个 bs-config.js 文件，并添加以下内容：

Copy code
module.exports = {
  files: ['./src/**/*'], // 监视的文件路径
  server: {
    baseDir: './src' // 服务器根目录
  }
};

在终端中运行以下命令启动 Browsersync：

browser-sync start --config bs-config.js

然后也可以实现在编辑 HTML 内容时实现实时更新和预览效果。赶快去试试吧

Demo源码地址：

https://github.com/ZHYI-source/Zspace.git

书中枫叶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实时预览和热更新html

热模块替换（HMR）是一种前端开发工具，它允许在不刷新整个页面的情况下，更新代码和资源。这意味着你可以在修改代码时立即看到效果，而不需要等待整个页面重新加载。HMR 将只更新修改过的模块，而保留应用程序的状态。通过配置Webpack和使用其热模块替换（HMR）功能，可以在前端开发过程中实现实时预览和热更新。这大大提高了开发效率，可以在修改代码时立即看到效果，而不需要等待整个页面重新加载。Webpack Dev Server的HMR功能使得前端开发更加流畅和高效。可以改变hot: false。
复制链接

扫一扫