Question

我试图通过webpack-dev-middleware自动重新加载（没有热重载）一些JavaScript。

我的Express服务器的当前代码：

app.use(webpackDevMiddleware(compiler, {
    inline: true,
    noInfo: true,
    publicPath: config.output.publicPath,
    stats: {colors: true}
}));

一切似乎运行良好，但是当我改变某些内容时，我的浏览器不会自动重新加载（尽管webpack重建......）。

我是否需要添加额外的条目以使用webpack-dev-middleware自动重新加载浏览器？

Answer 1

似乎webpack-dev-middleware不支持自动重新加载。相反的方法是在另一个端口启动您的快速服务器并启动一个webpack-dev服务器，contentBase指向您的快速服务器（或使用proxy进行更精细的控制）。（见this issue。）

另一种方法是反过来执行start a dev-server programmatically并修改其内部快速服务器：

var server = new WebpackDevServer(webpack(webpackConfig), webpackDevServerConfig);
server.app.use(function(req, res, next) {
    // server.app is an express server
});
server.listen(8080, "localhost", function(err) {
});

Answer 2

@cdauth几乎已经得到了他的第二个例子，但这不是修改内部服务器的正确方法。正确的方法是在webpack-dev-server config中放置setup函数：

const devServer = new WebpackDevServer(webpack(webpackConfig), {
    // Your configuration here
    setup(app) {
        // Modify express app here, e.g.
        app.get('/rest/my-path', myModule.myFunction);
        app.use(...);
    },
    // or, instead, you could put your configuration in another module:
    setup: someModule.configureApp, // function that accepts an Express app
});

这比尝试同时运行服务器和webpack-dev-server更容易。您可以使用普通Express保留原始配置，并将其用作测试和生产的入口点，但将上述代码放在一个新文件中（例如devServer.js）并将其用于开发。

Web开发中间件自动重新加载

2 个答案: