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

Question

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

但是，如果我使用节点 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

对于配置中的每个条目，添加以下内容：'webpack-dev-server/client?http://localhost:8080'，将查询字符串中的 url 替换为您的本地服务器 url。

添加此入口点意味着您必须使用数组作为入口点。这可以看成两种方式之一：

entry: ['webpack-dev-server/client?http://localhost:8080', 'app.js']

entry: {
  a: ['webpack-dev-server/client?http://localhost:8080', 'app.js'],
  b: ['webpack-dev-server/client?http://localhost:8080', 'other.js'],
}

确保只在开发特定的配置中使用它。

就是这样！一直在看this YouTube video, so credit goes to the author, but upon further review of the repo, it was in the example的时候就注意到了这个细节，只是不是很明显。

Answer 2

主要留给自己，但其他人可能会受益：这对我在 Virtualbox 中的 Lubuntu 上有效：

watchOptions: {
  poll: true
}

注意：当使用节点 API 时，Webpack 配置 devServer 选项将被忽略，您必须像这样传递 devServer 选项：

 const s = new WebpackDevServer(compiler, {
  stats: {
    colors: true
  },
  inline: true,
  watchOptions: {
    poll: true
  }
});

Answer 3

我在 SO 上搜索并尝试了各种方法，直到找到 webpack 2/3 的以下内容：

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

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

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

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

Live reloading in webpack-dev-server when using Node.js API

webpack

webpack-dev-server