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

使用方法

1、文件目录

2、安装

webpack, webpack-dev-middleware, webpack-hot-middleware,

3、文件内容

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