用 webpack-dev-derver 监听客户端的热更新事件？

Question

这有点边缘情况，但了解它会有所帮助。

在使用 webpack-dev-server 开发扩展以保持扩展代码最新时，听“webpackHotUpdate”会很有用

带有内容脚本的 Chrome 扩展程序通常有两个方面：

1. 背景
2. 注入内容脚本

当使用带有 HMR 的 webpack-dev-server 时，后台页面保持同步就好了。但是，内容脚本需要重新加载扩展以反映更改。我可以通过监听来自 hotEmmiter 的“webpackHotUpdate”事件然后请求重新加载来解决这个问题。目前，我以一种可怕且非常不可靠的hacky方式进行这项工作。

var hotEmitter = __webpack_require__(XX)

hotEmitter.on('webpackHotUpdate', function() {
    console.log('Reloading Extension')
    chrome.runtime.reload()
})

XX 仅表示当前分配给发射器的编号。正如您可以想象的那样，每当构建发生变化时，这都会发生变化，因此这是一种非常临时的概念证明。

我想我可以设置我自己的套接字，但这似乎有点矫枉过正，因为事件已经被转移，我只是想听听。

我最近才对 webpack 生态系统更加熟悉，因此非常感谢任何指导。

Answer 1

好的！

我通过环顾四周来解决这个问题：

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-dev-utils/webpackHotDevClient.js

非常感谢 create-react-app 团队明智地使用评论。

我创建了一个精简版，专门用于处理扩展开发的重新加载条件。

var SockJS = require('sockjs-client')
var url = require('url')

// Connect to WebpackDevServer via a socket.
var connection = new SockJS(
    url.format({
        // Default values - Updated to your own
        protocol: 'http',
        hostname: 'localhost',
        port: '3000',
        // Hardcoded in WebpackDevServer
        pathname: '/sockjs-node',
    })
)

var isFirstCompilation = true
var mostRecentCompilationHash = null

connection.onmessage = function(e) {
    var message = JSON.parse(e.data)
    switch (message.type) {
        case 'hash':
            handleAvailableHash(message.data)
            break
        case 'still-ok':
        case 'ok':
        case 'content-changed':
            handleSuccess()
            break
        default:
        // Do nothing.
    }
}

// Is there a newer version of this code available?
function isUpdateAvailable() {
    /* globals __webpack_hash__ */
    // __webpack_hash__ is the hash of the current compilation.
    // It's a global variable injected by Webpack.
    return mostRecentCompilationHash !== __webpack_hash__
}

function handleAvailableHash(data){
    mostRecentCompilationHash = data
}

function handleSuccess() {
    var isHotUpdate     = !isFirstCompilation
    isFirstCompilation  = false

    if (isHotUpdate) { handleUpdates() }
}

function handleUpdates() {
    if (!isUpdateAvailable()) return
    console.log('%c Reloading Extension', 'color: #FF00FF')
    chrome.runtime.reload()
}

当您准备好使用它时（仅在开发期间），您只需将其添加到您的 background.js 入口点

module.exports = {
    entry: {
        background: [
            path.resolve(__dirname, 'reloader.js'), 
            path.resolve(__dirname, 'background.js')
        ]
    }
}

为了按照最初的要求实际连接到事件发射器，您可以从 webpack/hot/emitter 中要求它，因为该文件导出所使用的 EventEmitter 实例。

if(module.hot) {
    var lastHash

    var upToDate = function upToDate() {
        return lastHash.indexOf(__webpack_hash__) >= 0
    }

    var clientEmitter = require('webpack/hot/emitter')

    clientEmitter.on('webpackHotUpdate', function(currentHash) {
        lastHash = currentHash
        if(upToDate()) return

        console.log('%c Reloading Extension', 'color: #FF00FF')
        chrome.runtime.reload()
    })
}

这只是一个直接来自源头的精简版本：

https://github.com/webpack/webpack/blob/master/hot/dev-server.js