首页 文章

Webpack热模块替换服务器代码

提问于
浏览
5

到目前为止,我所看到的所有webpack示例都涉及客户端热模块替换,例如:thisthis .

按照的WebPack文件,一个可以使用的WebPack-dev的服务器或中间件(的WebPack-DEV-的WebPack-DEV-中间件和的WebPack热中间件,随着 webpack-hot-middleware/client 在配置 entry ,并集成到如快递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监视服务器端代码,以便在文件更改时重启服务器)

2 回答

  • -1

    与Webpack捆绑在一起的热重载服务器中间件实际上比热重载客户端捆绑包容易得多,原因有两个:

    • 您不必处理服务器/客户端通信 .

    • 中间件几乎总是无国籍,所以你不需要关心自己的状态保存 .

    这意味着您可以忽略与客户端热模块重新加载相关的所有移动部件,例如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更适合在服务器上热重新加载通用应用程序 .

  • 2

    这可以是一个很好的起点,https://github.com/jlongster/backend-with-webpack .

相关问题