Thay thế mô-đun webpack nóng trong mã máy chủ

Question

Tất cả các ví dụ về webpack mà tôi đã xem xét cho đến nay đối phó với thay thế mô-đun nóng phía máy khách, ví dụ: this và this.

Theo tài liệu webpack, người ta có thể sử dụng phần tử webpack-dev-server OR trung gian (webpack-dev-webpack-dev-middleware và webpack-hot-middleware, cùng với webpack-hot-middleware/client trong cấu hình entry và được tích hợp vào ví dụ express js) để kích hoạt thay thế mô-đun nóng cho mã phía máy khách

Có thể bật thay thế mô-đun nóng cho mã phía máy chủ không? Tài liệu hiển thị số 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); 
    }); 
} 

Tài liệu này hoàn toàn được giải thích.

Vì vậy, câu hỏi đặt ra là, thay thế mô-đun nóng sẽ được triển khai như thế nào trong mã phía máy chủ mà không cần khởi động lại máy chủ? (Hiện tại, tôi có nodemon xem mã phía máy chủ để khởi động lại máy chủ khi thay đổi tệp)

Answer 1

Đây có thể là điểm khởi đầu tốt, https://github.com/jlongster/backend-with-webpack.

Answer 2

Hot nạp lại máy chủ middleware kèm với Webpack là thực sự dễ dàng hơn nhiều so với gói phụ tải lại client nóng vì hai lý do:

1. Bạn không cần phải xử lý thông tin liên lạc server/client.
2. Phần mềm trung gian hầu như luôn luôn là không có quốc tịch, do đó bạn không cần phải quan tâm đến chính mình với việc bảo quản nhà nước.

Điều này có nghĩa bạn có thể bỏ qua tất cả các bộ phận chuyển động kết hợp với mô-đun nóng phía khách hàng nạp lại như WebSockets cũng như giảng dạy mã của bạn để cập nhật chính nó thông qua module.hot.accept/module.hot.dispose.

Dưới đây là một ví dụ:

// ./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); 

Như bạn có thể thấy một thực tế rằng không có nhà nước lo lắng về việc có nghĩa là latestMiddleware chỉ có thể tham khảo các middleware gói mới mà không cần phải viết logic tùy chỉnh để cập nhật các mô-đun khác trong biểu đồ phụ thuộc.

Ngẫu nhiên, đây chính là kỹ thuật tương tự được sử dụng bởi webpack-hot-server-middleware, sự khác biệt duy nhất là webpack-hot-server-middleware được hướng đến các ứng dụng phổ biến tải lại trên máy chủ.