服務器代碼中的Webpack熱模塊替換

到目前爲止，我所看到的所有webpack示例都涉及客戶端熱模塊替換，例如：this和this。服務器代碼中的Webpack熱模塊替換

根據該的WebPack文件，一個可以使用的WebPack-DEV-服務器OR中間件（的WebPack-DEV-的WebPack-DEV-中間件和的WebPack熱的中間件，在一個配置entrywebpack-hot-middleware/client沿，並集成到例如express js）啓用客戶端代碼的熱模塊替換

是否可以啓用服務器端代碼的熱模塊替換？該文件確實顯示了example

var requestHandler = require("./handler.js"); 
var server = require("http").createServer(); 
server.on("request", requestHandler); 
server.listen(8080); 

// check if HMR is enabled 
if(module.hot) { 
    // accept update of dependency 
    module.hot.accept("./handler.js", function() { 
     // replace request handler of server 
     server.removeListener("request", requestHandler); 
     requestHandler = require("./handler.js"); 
     server.on("request", requestHandler); 
    }); 
}

該文件是在解釋相當備用。

所以問題是，如何在不重啓服務器的情況下在服務器端代碼中實現熱模塊替換？（此刻，我有nodemon監視服務器端代碼，以重新啓動服務器上的文件更改）

來源

2015-12-05 Green

你有沒有找到答案？我正在爲完全相同的事情而苦苦掙扎，我會爲一個簡單的運行示例而死，並帶有一些解釋*。 Webpack對我來說依然是純粹的魔力...... –

我終於在https://github.com/aunz/mwb/tree/master/examples/basicApp創建了自己的例子。看一看。 – Green

這看起來不錯，謝謝！ –

-1

這可以是一個很好的起點，https://github.com/jlongster/backend-with-webpack。用的WebPack捆綁

來源

2015-12-20 04:01:56 1001b

由於某些原因，我無法獲得運行示例 – Green

發佈的代碼庫隨附了一系列關於作者選擇該特定修補程序的重複的3篇文章。最相關的是他談論服務器端webpack捆綁的第二部分：http://jlongster.com/Backend-Apps-with-Webpack--Part-II。但是，他的方法不支持在服務器上進行熱點編碼。正如他在文章中解釋的那樣，他總是重新開始改變，正如你可以在他的gulp文件的源代碼中看到的那樣：https：//github.com/jlongster/backend-with-webpack/blob/master/gulpfile.js# L143 –

使用gulp && webpack？這是懶惰的解決方案...不，謝謝。 :) – Michal

熱重裝服務器中間件實際上比熱重裝客戶端捆綁有兩個原因容易得多：

你不必來處理服務器/客戶端通信。
中間件幾乎總是無狀態的，所以你不需要關心狀態保存。

這意味着你可以忽略所有客戶端熱模塊重裝如WebSockets的以及通過module.hot.accept/module.hot.dispose教你的代碼來更新自身相關聯的移動部件。

下面是一個例子：

// ./src/middleware.js 
module.exports = (req, res) => { 
    res.send('Hello World'); 
};

// webpack.config.js 
const path = require('path'); 

module.exports = { 
    target: 'node', 
    entry: './src/middleware.js', 
    output: { 
     path: path.join(__dirname, './dist'), 
     filename: 'middleware.js', 
     libraryTarget: 'commonjs2' 
    } 
};

// ./src/index.js 
const express = require('express'); 
const config = require('webpack.config.js'); 

const app = express(); 
const queue = []; 
let latestMiddleware; 

webpack(config).watch(() => { 
    // re-require new middleware 
    delete require.cache[require.resolve('./dist/middleware.js')] 
    latestMiddleware = require('./dist/middleware.js'); 
    // pass buffered requests to latestMiddleware 
    while (queue.length) latestMiddleware.apply(void 0, queue.shift()); 
}); 

app.use((req, res, next) => { 
    if (latestMiddleware) { 
     latestMiddleware(req, res, next); 
     return; 
    } 
    queue.push([req, res, next]); 
}); 

app.listen(6060);

正如你所看到的事實，有沒有國家擔心意味着latestMiddleware可以簡單地引用新的捆綁的中間件，而無需編寫自定義邏輯更新依賴關係圖中的其他模塊。

順便提一句，這與webpack-hot-server-middleware使用的技術完全相同，唯一不同的是webpack-hot-server-middleware更適合在服務器上熱重新加載通用應用程序。

來源

2016-10-20 22:30:15 riscarrott

服務器代碼中的Webpack熱模塊替換

回答

相關問題