webpack-hot-middleware 插件的使用
该文章以收录 《webpack探索之路》
前言
webpack-hot-middleware 是用来进行页面的热重载的,刷新浏览器 一般和 webpack-dev-middleware 配合使用，实现热加载功能,<!-- more --> 接下来我们使用webpack-hot-middleware 和 webpack-dev-middleware来实现像webpack-dev-server 一样的热加载功能。 webpack-hot-middleware的用法：传送门,
github地址：
https://github.com/glenjamin/webpack-hot-middleware
练习代码地址: (webpackHotMiddleware 文件夹,下载执行命令即可)
https://github.com/webxiaoma/webpack-domes
使用方法
一、文件目录
二、安装
webpack, webpack-dev-middleware, webpack-hot-middleware,
三、文件内容
1.index.js
var sub = require('./sub');
var app = document.createElement('div');
app.innerHTML = '<h1>Hello World h1</h1>';
app.appendChild(sub());
document.body.appendChild(app);2.sub.js
function generateText() {
var element = document.createElement('h2');
element.innerHTML = "Hello h2 world h2";
return element;
}
module.exports = generateText;3.webpack.config.js
const path = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
//定义了一些文件夹的路径
const ROOT_PATH = path.resolve(__dirname);
const APP_PATH = path.resolve(ROOT_PATH, 'app');
const BUILD_PATH = path.resolve(ROOT_PATH, 'build');
module.exports = {
//实现刷新浏览器webpack-hot-middleware/client?noInfo=true&reload=true 是必填的
entry: ['webpack-hot-middleware/client?noInfo=true&reload=true' , APP_PATH],
//输出的文件名 合并以后的js会命名为bundle.js
output: {
path: BUILD_PATH,
filename: 'bundle.js'//将app文件夹中的两个js文件合并成build目录下的bundle.js文件
},
//添加我们的插件 会自动生成一个html文件
plugins: [
new HtmlwebpackPlugin({
title: 'Hello World app'
}),//在build目录下自动生成index.html，指定其title
// 实现刷新浏览器必写
new webpack.HotModuleReplacementPlugin(),
],
};4.server.js
const path = require("path")
const express = require("express")
const webpack = require("webpack")
const webpackDevMiddleware = require("webpack-dev-middleware")
const webpackHotMiddleware = require("webpack-Hot-middleware")
const webpackConfig = require('./webpack.config.js')
const app = express(),
DIST_DIR = path.join(__dirname, "dist"), // 设置静态访问文件路径
PORT = 9090, // 设置启动端口
complier = webpack(webpackConfig)
let devMiddleware = webpackDevMiddleware(complier, {
publicPath: webpackConfig.output.publicPath,
quiet: true //向控制台显示任何内容
})
let hotMiddleware = webpackHotMiddleware(complier,{
log: false,
heartbeat: 2000,
})
app.use(devMiddleware)
app.use(hotMiddleware);
// 这个方法和下边注释的方法作用一样，就是设置访问静态文件的路径
app.use(express.static(DIST_DIR))
// app.get("*", (req, res, next) =>{
// const filename = path.join(DIST_DIR, 'index.html');
// complier.outputFileSystem.readFile(filename, (err, result) =>{
// if(err){
// return(next(err))
// }
// res.set('content-type', 'text/html')
// res.send(result)
// res.end()
// })
// })
app.listen(PORT,function(){
console.log("成功启动：localhost:"+ PORT)
})文件都写好了我们，可以直接执行 node server,我们也可以在 package.json中制定命令
"scripts": {
"start": "node server.js"
},然后运行npm start,之后我们会在命令行中看到，
然后我们打开 http://localhost:9090
当我我们修改index.js、sub.js中的内容时，我们会看到浏览器会自动刷新，显示编译后的文件。
webpack-hot-middleware的其它配置项
配置项可以通过query 方式添加到webpack config中的路径来传递给客户端
webpack-hot-middleware/client?noInfo=true&reload=true
配置项都有：
- path - 中间件为事件流提供的路径
- name - 捆绑名称，专门用于多编译器模式
- timeout - 尝试重新连接后断开连接后等待的时间
- overlay - 设置为false禁用基于DOM的客户端覆盖。
- reload - 设置为true在Webpack卡住时自动重新加载页面。
- noInfo - 设置为true禁用信息控制台日志记录。
- quiet - 设置为true禁用所有控制台日志记录。
- dynamicPublicPath - 设置为true使用webpack publicPath作为前缀path。（我们可以__webpack_public_path__在入口点的运行时动态设置，参见output.- publicPath的注释）
- autoConnect - 设置为false用于防止从客户端自动打开连接到Webpack后端 - 如果需要使用该setOptionsAndConnect功能修改选项
通过传递第二个参数，可以将配置选项传递给中间件。
webpackHotMiddleware(webpack,{
log: false,
path: "/__what",
heartbeat: 2000
})- log - 用于记录行的函数，传递false到禁用。默认为console.log
- path - 中间件将服务事件流的路径必须与客户端设置相匹配
- heartbeat - 多长时间将心跳更新发送到客户端以保持连接的活动。应小于客户的timeout设置 - 通常设置为其一半值。
更多详细用法：
https://github.com/glenjamin/webpack-hot-middleware
结束
webpack-hot-middleware 运行原理
中间件将其本身安装为Webpack插件，并监听编译器事件。
每个连接的客户端都会获得Server Sent Events连接，服务器将向编译器事件的连接客户端发送通知。
当客户端收到消息时，它将检查本地代码是否是最新的。如果不是最新的，它将触发webpack热模块重新加载。