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热模块重新加载。