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

Question

如果我设置一个非常简单的 webpack 项目并安装 webpack-dev-server，当我从命令行或通过 npm 脚本运行“webpack-dev-server --open”时，默认情况下我会实时重新加载。 IE。一旦我编辑源文件，就会重新构建包并自动重新加载浏览器。

但是，如果我使用 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(配置，选项)； ...

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

对我来说，它就像一个魅力。