webpack学习之路(四)webpack-hot-middleware实现热更新
上一节我学习了webpack-dev-middleware
,但是单独使用它并没有实现热更新,所以这节我要学习搭配使用webpack-hot-middleware
,来实现热更新功能。
创建项目
我们依然创建一个项目
mkdir hot-middleware && cd hot-middleware
npm init -y
mkdir src dist
cd src && touch index.js block.js
cd ../dist && touch index.html
cd ../
touch server.js webpack.dev.config.js
复制代码
目录:
├── dist
│ └── index.html
├── package.json
├── server.js
├── src
│ ├── block.js
│ └── index.js
└── webpack.dev.config.js
复制代码
下载需要的包:
npm i webpack webpack-cli webpack-dev-middleware webpack-hot-middleware express --save-dev
复制代码
编写内容
/dist/index.html
<!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-hot-middleware</title><!-- 引用打包后js文件 --><script src="./index.js"></script>
</head>
<body>
</body>
</html>
复制代码
/src/index.js
'use strict'
import { test } from './block.js'
console.log('hello world~')test()
// 接收热更新输出,只有accept才能被更新
if (module.hot) {module.hot.accept();
}
复制代码
/src/block.js
'use strict'module.exports = {test: function () {console.log(12345)}
}
复制代码
webpack.dev.config.js
var webpack = require('webpack');
var path = require('path')module.exports = {mode: 'development', // 热更新只在开发模式下有用entry: [
+ 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', // 必须这么写,这将连接到服务器,以便在包重新构建时接收通知,然后相应地更新客户端'./src/index.js'],output: {path: path.resolve(__dirname, 'dist'),publicPath: '/', // 服务器脚本会用到filename: 'index.js'},plugins: [
+ new webpack.HotModuleReplacementPlugin(), // 启动HMR
+ new webpack.NoEmitOnErrorsPlugin() // 在编译出现错误时,使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误。],
};
复制代码
server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');const app = express();
const config = require('./webpack.dev.config.js'); // 引入配置文件
const compiler = webpack(config); // 初始化编译器// 使用webpack-dev-middleware中间件
app.use(webpackDevMiddleware(compiler, {publicPath: config.output.publicPath
}));// 使用webpack-hot-middleware中间件,配置在console台输出日志
+ app.use(webpackHotMiddleware(compiler, {
+ log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000
+ }));// 使用静态资源目录,才能访问到/dist/idndex.html
app.use(express.static(config.output.path))// Serve the files on port 3000.
app.listen(3000, function () {console.log('Example app listening on port 3000!\n');
});
复制代码
运行
我们增加一个命令运行看看
package.json 增加一个命令
"scripts": {"test": "echo \"Error: no test specified\" && exit 1",
+ "server": "node server.js"},
复制代码
npm run server
复制代码
浏览器查看http://localhost:3000/
效果已经出来,我们发现这次比之前单独使用webpack--middleware
多了一行提示,因为我们配置了热更新日志输出
[HMR] connected
复制代码
HMR- Hot Module Replacement
即热更新,这已经很明白地告诉我们热更新已经连接上了,我们来验证下。
修改/src/block.js
'use strict'module.exports = {test: function () {console.log('abcd')}
}
复制代码
我们发现,请求只是多出来两行,并没有刷新页面
控制台也输出了过程
到此,我们就使用webpack-dev-middleware
和webpack-hot-middleware
实现了热更新。
详细配置请参考官方文档webpack-hot-middleware
为什么有了webpack-dev-server
,还有有webpack-dev-middleware
搭配webpack-hot-middleware
的方式呢?
因为webpack-dev-server
是封装好的,除了webpack.config
和命令行参数之外,很难去做定制型开发。而 webpack-dev-middleware
是中间件,可以编写自己的后端服务然后使用它,开发更灵活。
I am moving forward.
转载于:https://juejin.im/post/5cf8a80df265da1bb67a0894
webpack学习之路(四)webpack-hot-middleware实现热更新相关推荐
- 修改html时webpack热更新,webpack学习之路(二)webpack-dev-server实现热更新
上一章对webpack的配置有了简单的认识. 这一章,我需要学习的是webpack热更新,因为在开发过程中,不希望当文件更改时,人肉去编译文件,刷新浏览器. webpack热更新 webpack-de ...
- webpack学习之路
webpack学习之路 当自己在学习webpack的时候,在网上发现中文的很详细的教程很少,于是便想将自己学习webpack的笔记记录整理下来,便有了这篇文章,希望对大家有所帮助,如果有错误,欢迎大家 ...
- Java多线程学习之路(四)---死锁(DeadLock)
Java多线程学习之路(四)-死锁(DeadLock) 1.定义 死锁就是多个线程在竞争共享资源的时候,相互阻塞,不能脱身的状态(个人理解).其实死锁一定程度上可以看成一个死循环. 举个现实生活中的例 ...
- typescript学习之路(四) —— ts类的继承(包含es5以及es6的类继承)
上一文已经写了es5,es6等类的定义,所以本章主要写es5和es6的继承,由于es6的继承和ts的继承如出一辙,只是加了类型定义而已,所以ts的继承稍微写下,不会太详细. 文章目录 es5继承 原型 ...
- webpack学习之路------配置多个 HTML 文件
[附注信息 ----> 关注公众号:CS阿吉,大家一起分享更多的技术文章,聊天技术问题.] 目录结构: app.cssbody {background: pink;} contact.html ...
- webpack学习(七):启用 HMR(模块热替换)
demo地址: https://github.com/Lkkkkkkg/webpack-demo 上次使用 webpack-dev-serve : https://blog.csdn.net/qq59 ...
- webpack实践之路(七):模块热替换HMR
HMR 模块热替换(Hot Module Replacement 或 HMR)允许在运行时更新各种模块,而无需进行完全刷新. HMR主要是通过以下几种方式,来显著加快开发速度: 保留在完全重新加载页面 ...
- Redis——学习之路四(初识主从配置)
首先我们配置一台master服务器,两台slave服务器.master服务器配置就是默认配置 端口为6379,添加就一个密码CeshiPassword,然后启动master服务器. 两台slave服务 ...
- metasploit学习之路(四)记一次实战--永恒之蓝(MS017-010)
在我的metasploit的学习博客中,也算是实操的一篇,可以对使用流程和一些必要的命令进行学习. 永恒之蓝这个漏洞我没有复现过,但是这一次偶然的机会玩了一把. 大佬在讲台上面传授经验,用的是wind ...
最新文章
- java 1%10_Java 操作符与运算符详解
- [How TO]-python venv虚拟环境
- k8s service:ClusterIP、NodePort、LoadBalancer、ExternalName
- 列表使用与内部实现原理
- ENVI5.3安装教程|带资源
- MySQL如何安装离线_mysql8.0.2离线安装配置方法图文教程
- python抓取gb2312/gbk编码网页乱码问题
- 编译原理教程_7 语法制导的语义计算
- Linux:为什么性能工具需要 BPF 技术
- groovy学习(四)io
- linux下实现getch()函数的功能,linux下有没有和windows下的getch函数功能基本一样的函数?...
- 最优化理论与方法(袁亚湘 孙文瑜)笔记(二)
- 数字图像处理不得不知的点(1)
- 十三年来,淘宝走过的大数据之路
- 计算机网络——cookie、session、token原理
- 这世界就是,一些人总在昼夜不停地运转,而另外一些人,起床就发现世界已经变了。...
- 【那些年,我们一起追得女孩】第十五章
- 如何选购太阳镜(分类、镜片颜色、注意事项)
- swi prolog 和java_在Java和SWI Prolog之间连接 - java
- 发现同义词 python_python – 使用WordNet查找同义词,定义和例句