webpack-dev-derverを使用してクライアント側の最新の更新イベントを監視しますか？

Question

これはちょっとした問題ですが、知っておくと便利です。

日までの延長コードを維持するためにWebPACKの-devのサーバーを使用して拡張を開発する場合、「webpackHotUpdate」を聞くことが有用であろう

コンテンツスクリプトとChromeの拡張機能は、多くの場合、式には2つの側面があります。

1. 背景
2. 注入されたコンテンツスクリプト

HMR背景PAでのWebPACK-devのサーバーを使用してgeはうまく同期しています。しかし、コンテンツスクリプトは、変更を反映するために拡張機能を再ロードする必要があります。私はhotEmmiterから "webpackHotUpdate"イベントを聞いてリロードを要求することでこれを解決できます。現在、私はこれをひどくひどく信頼できないほどハッキリな方法で処理しています。

var hotEmitter = __webpack_require__(XX) 

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

XXは、単にエミッタに現在割り当てられている番号を表します。ビルドが変わるたびにこれが変わったと想像することができますので、コンセプトソートの非常に一時的な証明です。

私は自分のソケットをセットアップすることができますが、イベントはすでに転送されているので、私は単に聞きたいので、それは過剰なようです。

私は最近、ウェブパックのエコシステムに精通しているので、どんな指針も高く評価されています。

Answer 1

大丈夫です！

私はここの周りに見ることで、これを働い：

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

コメントの彼らの賢明な使用のために作成反応するアプリチームに感謝を。

私はこれを具体的には、拡張開発用のリロード条件を処理するための、スリムなバージョンを作成しました。

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() 
} 

あなたは、単に実際にイベントにフックするためのエントリポイント

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

---

あなた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