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熱模塊從新加載。