webpack几种手动实现HMR的方式

2025-07-28 23:44:21

1.前言

众所周知，在webpack中使用模块热替换(HMR)，能够使得应用在运行时，无需开发者重新npm run dev、刷新页面，便能更新更改的模块，并且将效果及时展示出来，这无疑极大的改善了前端同学们的生活。
当然，目前有许多脚手架——比如vue-cli、create-react-app等，通过这些脚手架，我们可以很轻松的搭建项目，而且这些脚手架自动为我们配置好了热更新功能，从此，我们再也不需要webpack配置工程师了【逃】
但在某些情况下，我们依然需要手动配置热更新，这篇博客主要分享几种手动配置热更新的方法。

2.GitHub

GitHub

3.基本配置

因为我们使用了vue框架来进行开发（当然也可以使用其他框架），所以，需要先进行一些配置。

项目目录

build目录下是webpack的配置文件
src下面是项目代码

package.json

不用说，第一步肯定是安装各种依赖，基本的依赖如下

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "cross-env": "^5.1.6",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "moment": "^2.22.2",
    "vue-loader": "^15.2.4",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.11.1",
    "webpack-cli": "^3.0.3",
    "webpack-merge": "^4.1.2"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "vue": "^2.5.16"
  }

webpack.config.js

在build目录下新建webpack.config.js备用，这个文件主要是作为webpack的基础配置文件，一般我们会区分dev（development）与build（production）两种情况，但两种情况的某些配置是一样的，所以建立一个公共配置文件可以减少代码量。webpack.conf.js中代码如下

const path = require('path');
const webpack = require('webpack');
const package = require('./../package.json');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const moment = require('moment');
// 设置版本号
const buildVersion = moment().format('YYYY-MM-DD_HH_mm_ss');

module.exports = {
    entry: path.join(__dirname, '../src/pages/main.js'),
    output: {
        path: path.resolve(__dirname, '../dist'),
        publicPath: '/',
        filename: package.name + '.js'
    },
    module: {
        rules:[
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {}
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            version: buildVersion,
            filename: 'index.html',
            template: path.join(__dirname, '../src/pages/index.html'),
            inject: 'body'
        })
    ],
    externals: {
        'babel-polyfill': 'window'
    },
    devtool: 'source-map'
}

代码很简单，不难理解

main.js

这个文件主要就是创建vue实例

import 'babel-polyfill'
import Vue from 'vue'

import App from '../container/main.vue'

new Vue({
    el: '#app',
    render: h => h(App)
})

index.html

发挥模板作用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>dev-server HRM</title>
    <meta name="robots" content="all" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover"
    />
    <!-- 显示工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 工具栏和菜单栏样式 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true" />
    <!-- 忽略页面中的数字识别为电话 -->
    <meta name="format-detection" content="telephone=no" />
</head>
<body>
    <div id="app"></div>
</body>
</html>

main.vue

主要用于测试热加载是否成功

4.webpack-dev-server

webpack通过使用webpack-dev-server可以构建本地服务器，相当于一个小型express，我们可以用它来实现热加载

package.json

在安装webpack-dev-server之后我们需要在package.json中配置script字段

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/dev.config.js",
   "build": "cross-env NODE_ENV=production webpack-dev-server --config build/build.config.js",
  "test": "echo \"Error: no test specified\" && exit 1"
}

需要说明的是，我们通过cross-env能跨平台地设置及使用环境变量，我们通过它来设置是development还是production

dev.config.js

在build目录下新建dev.config.js作为dev情况下webpack的配置文件

const webpack = require('webpack')
const config = require('./webpack.config.js')

// webpack4开始需要配置的变量
config.mode = "development";

config.devServer = {
    historyApiFallback:true,
    // hot参数控制更新是刷新整个页面还是局部刷新
    hot: true,
    // inline是热更新的一种模式，另一种是iframe
    inline: true,
    port: 80
}

// 也一定要加上HotModuleReplacementPlugin
config.plugins.push(
    new webpack.HotModuleReplacementPlugin()
)

// 需要导出
module.exports = config;

完成

运行npm run dev，修改main.vue，不用刷新浏览器，webapck为我们自动打包并更新。
其实可以直接在控制台network中判断是否启动热重载

webpack-dev-server使用websocket向浏览器发送更新信息

5.webpack-dev-middleware + webpack-hot-middleware

除了使用webpack-dev-server，我们还可以使用webpack-dev-middleware + webpack-hot-middleware来实现热重载，不过这两个模块都不具有服务器的功能，我们还需要安装express

package.json

同样，在依赖都安装好之后，需要配置package.json的script字段

"scripts": {
  "dev": "cross-env NODE_ENV=development node ./build/dev.config.js",
  "build": "cross-env NODE_ENV=production node ./build/build.config.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

dev.config.js

采用这种方案，dev.config.js需要写的代码就比较多了

const app = require('express')();
const webpack = require("webpack");
const webpackDevMiddleware = require("webpack-dev-middleware");
const webpackHotMiddleware = require("webpack-hot-middleware");
const path = require("path");
let config = require("./webpack.config")

config.mode = "development";

// 灰常重要
config.entry = [config.entry,'webpack-hot-middleware/client'];

config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    // 当开启 HMR 的时候使用该插件会显示模块的相对路径，建议用于开发环境
    new webpack.NamedModulesPlugin()
)

const compiler = webpack(config);

// 使用dev-middleware与hot-middleware

const devMiddleware = webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
    quiet: true
})

const hotMiddleware = webpackHotMiddleware(compiler, {
    log: false,
    heartbeat: 2000
})

app.use(devMiddleware);
app.use(hotMiddleware);
app.listen(80);

与webpack-dev-server不同，因为这里使用的两个模块都没有服务器的功能，所以我们只能用express来开启服务

完成

运行npm run dev，修改main.vue，不用刷新浏览器，webapck为我们自动打包并更新。
也可以直接在控制台network中判断是否启动热重载

在这种情况下，webpack使用eventSource与浏览器沟通，与websocket双向通信不同的是，eventsource只能从服务器到客户端

到此这篇关于webpack几种手动实现HMR的方式的文章就介绍到这了,更多相关webpack HMR内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

详解react-webpack2-热模块替换[HMR]

本文介绍了react-webpack2-热模块替换[HMR],分享给大家,具体如下: 模块热替换功能会在应用程序运行过程中替换.添加或删除模块,而无需重新加载页面.这使得你可以在独立模块变更后,无需刷新整个页面,就可以更新这些模块,极大地加速了开发时间. babel 配置需要先下载 npm install --save-dev react-hot-loader@3.0.0-beta.6 然后在 .babelrc 中配置 { "presets": [ ["es2015&quo
webpack热模块替换（HMR）/热更新的方法

这是一篇关于webpack热模块替换的最简单的配置(不需要react),也称作热更新. 模块热替换(HMR)的作用是,在应用运行时,无需刷新页面,便能替换.增加.删除必要的模块. HMR 对于那些由单一状态树构成的应用非常有用.因为这些应用的组件是 "dumb" (相对于 "smart") 的,所以在组件的代码更改后,组件的状态依然能够正确反映应用的最新状态. webpack-dev-server内置"live reload",会自动刷新页面.
详解webpack2+node+react+babel实现热加载(hmr)

前端工程化开发的一个重要标志就是热替换技术,它大大的提高开发效率,使我们专注于写代码,webpack2中的热替换相比较1更加简洁. 1. 先看效果 2.目录结构 3.项目目录结构文件描述 bin 执行文件 node_modules node包 public 静态资源文件 static 静态资源 dist 编译后文件 src 项目js文件 .bablrc babel配置文件 webpack.config.dev.js开发模式webpack配置 webpack.config.pro.js生产模式we
浅谈Webpack多页应用HMR卡住问题

起因在公司搭建了套webpack多页面应用脚手架,开始用着很爽,解决了既想使用Vue的模块化开发,又想做多页打包上线管理的初衷,但是随着业务项目的增加,我发现npm run dev的时候,每次热加载,webpack的反应都很慢. 基本会卡在 94% assets optimization95% emitting 这个步骤很久准备具体定位一下问题的原因.由于项目基于vue-cli改写的多页应用脚手架,手动重写了HtmlWebpackPlugin插件,所以基本猜测和这个有关,后来证明也真的是这个
webpack几种手动实现HMR的方式

目录 1.前言 2.GitHub 3.基本配置项目目录 package.json webpack.config.js main.js index.html main.vue 4.webpack-dev-server package.json dev.config.js 完成 5.webpack-dev-middleware + webpack-hot-middleware package.json dev.config.js 完成 1.前言众所周知,在webpack中使用模块热替换(HMR)
8种手动和自动备份MySQL数据库的方法

作为流行的开源数据库管理系统,MySQL的使用者众多,为了维护数据安全性,数据备份是必不可少的.本文就为大家介绍几种适用于企业的数据备份方法. 使用MySQLDump进行MySQL备份 mysqldump是MySQL内置的工具,允许用户将数据库指定不同的选项备份到文件.服务器,甚至是压缩gzip文件中.mysqldump实用程序灵活,快速,可执行高级备份,并接受各种命令行参数,用户可通过这些参数来更改备份数据库的方式. Windows操作系统中的c:mysqlbin和Unix / Linux系统
Spring Boot详解五种实现跨域的方式

目录一.为什么会出现跨域问题二.什么是跨域三.非同源限制四.java后端实现CORS跨域请求的方式 1. 返回新的CorsFilter(全局跨域) 2. 重写WebMvcConfigurer(全局跨域) 3. 使用注解 (局部跨域) 4. 手动设置响应头(局部跨域) 5. 使用自定义filter实现跨域一.为什么会出现跨域问题出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能
两种JavaScript的AES加密方式（可与Java相互加解密）

由于JavaScript属于弱类型脚本语言,因此当其与强类型的后台语言进行数据交互时会产生各种问题,特别是加解密的操作.本人由于工作中遇到用js与Java进行相互加解密的问题,在网上查了很多资料及代码段,均无法解决.后总结多篇文档内容终于找到解决办法,现记录与此: 下面给大家介绍两种JavaScript的AES加密方式,具体详情如下所示: 第一种:加解密时需要秘钥(key)和秘钥偏移量(iv)的情况,在线验证地址:http://www.seacha.com/tools/aes.html //该方
Android四种数据存储的应用方式

Android四种数据存储的应用方式作为一个完整的应用程序,数据存储操作是必不可少的.因此,Android系统一共提供了四种数据存储方式.分别是:SharePreference.文件存储.SQLite. Content Provider.对这几种方式的不同和应用场景整理如下. 第一种: 使用SharedPreferences存储数据适用范围:保存少量的数据,且这些数据的格式非常简单:字符串型.基本类型的值.比如应用程序的各种配置信息(如是否打开音效.是否使用震动效果.小游戏的玩家积分等),解
4 种滚动吸顶实现方式的比较

前言我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果.我当时很纳闷为何一个滚动吸顶会有 bug,后来我查看代码才发现直接用的是 offsetTop 这个属性,而且并没有做兼容性处理. offsetTop 用于获得当前元素到定位父级( element.offsetParent )顶部的距离(偏移值). 定位父级 offsetParent 的定义是:与当前元素最近的 position != static 的父级元素. 或许写这个代码的人没有注意到"定位父级"这个这个附属条
八种Vue组件间通讯方式合集(推荐)

前言 Vue 提供了各种各样的通讯,其中包括兄弟间的通讯和非兄弟间的通讯,借此机会做个总结,查阅起来方便.如果喜欢的话可以帮忙点个赞 :+1: 或者关注一下 :yum: 1.props 目录结构 components ├── Parent.vue // 父亲 ├── Son1.vue // 儿子1 代码结构在父亲组件中使用儿子组件,给儿子通过 :date="xxx" 单向传值 <template> <div> <div>爸爸:{{date}
SpringBoot四种读取properties文件的方式(小结)

前言在项目开发中经常会用到配置文件,配置文件的存在解决了很大一份重复的工作.今天就分享四种在Springboot中获取配置文件的方式. 注:前三种测试配置文件为springboot默认的application.properties文件 #######################方式一######################### com.zyd.type3=Springboot - @ConfigurationProperties com.zyd.title3=使用@Configura
浅谈一种Laravel路由文件划分方式

最初,我想到了利用路由组方法可以接收文件,这就是 laravel 在 RouteServiceProvider 处拆分路由的方式. <?php namespace App\Providers; use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider; use Illuminate\Support\Facades\Route; class RouteServiceProvider ext
Python中4种实现数值的交换方式

目录 1.使用临时变量 2.使用tuple元组 3.使用加减法或乘除法 4.使用异或运算 1.使用临时变量该方法是最简单的,也是最容易理解的,适用于所有编程语言,其实现过程如下: tmp = a a = b b = tmp 2.使用tuple元组该方法是Python下特有的方法,并且只需要一行代码即可实现,其使用到了元组(tuple),其大致原理如下: 右边的 b, a 会构成一个由 b 和 a 组成的元组对元组进行拆包,然后再分别赋值给到左边的 a, b a, b = b, a 我们