使用Node.js API时,在webpack-dev-server中实时重新加载

Question

如果我设置一个非常简单的webpack项目并安装webpack-dev-server,当我从命令行或通过npm脚本运行"webpack-dev-server --open"时,默认情况下会重新加载.即只要我编辑源文件,就会重建捆绑包并自动重新加载浏览器.

但是,如果我使用Node API来启动webpack-dev-server,请使用以下代码:

const WebpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');
const webpackConfig = require('../webpack.config.dev');
const open = require('open');

const port = 3000;

let compiler = webpack(webpackConfig);
let server = new WebpackDevServer(compiler, {
  contentBase: "./src",
});

server.listen(port, "localhost", function(err) {
  if(err){
      console.log(err);
  }
  else{
      open('http://localhost:' + port);
  }
});

我放松了实时重装.当我更改源文件时,我可以看到webpack从命令行输出重建包,但浏览器不会刷新.

请注意,在我的情况下,不需要热模块重新加载,实际上是不可取的.我只是希望页面在使用webpack-dev-server CLI时完全按照默认情况进行刷新.

Answer 1

我正在搜索SO并尝试各种各样的东西,直到我找到以下webpack 2/3:

... webpackDevServer.addDevServerEntrypoints(config, options); ...

Webpack团队显然已经在webpack-dev-server模块中添加了一个util.有关详细信息,请参阅文档:https://webpack.js.org/guides/hot-module-replacement/

对我来说,它就像一个魅力.