Question

如果我设置了一个非常简单的webpack项目并安装了webpack-dev-server，那么当我运行＆＃34; webpack-dev-server --open＆＃34;从命令行或通过npm脚本我默认实时重新加载。即只要我编辑源文件，就会重建捆绑包并自动重新加载浏览器。

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

对我而言，它就像一个魅力。

Answer 2

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

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

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时注意到了这一细节，所以归功于作者，但在进一步审核回购后，它一直在the example，而且不是很明显。

Answer 3

这主要是作为一个注释留给自己，但其他人可能会受益：这对我在Virtualbox内部的Lubuntu工作：

watchOptions: {
  poll: true
}

注意：使用Node API时，将忽略Webpack config devServer选项，您必须传递devServer选项，如下所示：

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

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

3 个答案: