首先你需要对webpack如何生成bundle.js文件做一定的了解
1 启动server访问index.html
- 首先devserver 看名字就知道这玩意是一个开发用服务器 所以我们需要一个后端服务(这里使用koa)
- 我们需要在80端口访问我们打包好的html文件 这里使用koa-static 将index.html托管到服务器
- 这样一来 启动服务并访问8080即可打开我们写好的项目
const Koa = require('koa');
const serve = require("koa-static")
const app = new Koa();
app.use(serve("/***/dist", { extensions: ["html"] })) //托管dist下的html文件
app.listen(8080, () => {
console.log('dev-server启动在8080端口');
bundle() // 执行bundle
})
2 监听文件变化并重新打包
光能访问还不够 我们每次保存js文件 都需要重新执行一次打包 自动更新项目
- 使用node的fs.watch方法 监听src下所有文件的变化
// watch.js
const fs = require('fs')
fs.watch(
'/***/***/src', // 需要监控的文件夹绝对路径
{ recursive: true }, // 配置 监控子文件
callback // 文件发生变化时执行的回调
)
const callback = (event,filename)=>{
console.log(`${filename}文件发生变化`)
}
3 将打包好的代码推送给浏览器执行
- bundle()方法生成打包好的bundle代码(也就是bundle.js中的代码)
- 每次更新 重新生成一份bundle代码并交给浏览器执行
- 使用websocket进行通信 因为http需要客户端发起请求才能通信 而websocket可以由服务端发起请求 主动向客户端发送数据
function hotUpdate(webpackConfig) {
//TODO 创建WebSocketServer到3001端口
const ws = new WebSocket.Server({ port: 3001 });
//! 监听前后端链接事件
ws.on('connection', function (connection) {
console.log('websocket连接成功,热更新准备就绪')
// 生成bundle代码发送给浏览器
const callback= () => {
const newBundleCode = bundle()
connection.send(newBundleCode);
}
// 监听到src目录下文件变化 执行回调 发送新代码给浏览器
fs.watch('/***/***/src',{ recursive: true },callback)
});
}
- 在浏览器端需要接收这些代码并重新执行 (使用eval执行)
var ws = new WebSocket("ws://localhost:3001/");
//监听建立连接
ws.onopen = function (res) {
console.warn('websocket连接成功');
}
//监听服务端发来的消息
ws.onmessage = function (res) {
eval(res.data) // 使用eval执行新bundle的代码
}
至此就实现了一个建议的webpack-devServer的热更新
这里只做一个简单的思路整理 具体webpack还做了很多东西 建议查看大佬的文章
基本思路就是监控src下文件变化 重新生成代码 并通过websocket交给浏览器执行
实际中 webpack并不会重新执行所有代码 而是只替换发生变化的模块代码
并且devserver的bundle.js文件是先保存到内存中 再与服务器端做通信
详情可见memory-fs库
