如何禁用 webpack 开发服务器自动重新加载？

Posted 2023-02-16

【中文标题】如何禁用 webpack 开发服务器自动重新加载？

【英文标题】：How to disable webpack dev server auto reload?

【发布时间】：2017-06-07 10:51:38

【问题描述】：

我知道大多数人都有相反的问题，但我实际上想禁用自动重新加载功能。

这就是我运行服务器的方式：

webpack-dev-server --open --progress

这是我的开发服务器配置：

devServer: 
    contentBase: 'app',
    port: 9005,
    hot: false,
    inline: false

版本：

"webpack": "1.14.0",
"webpack-dev-middleware": "1.9.0",
"webpack-dev-server": "^1.16.2",
"webpack-hot-middleware": "2.13.2",
"webpack-md5-hash": "0.0.5"

通过此设置，webpack 开发服务器打开初始页面为localhost:9005/webpack-dev-server/，并开启自动重新加载（iframe 模式）。当我将inline 设置为true 时，它会打开localhost:9005 并且自动重新加载仍处于打开状态（inline 模式=> websockets）。

有没有办法完全禁用自动重新加载？

【问题讨论】：

停止使用 webpack-dev-server 并根据需要运行构建脚本？

我可以，但我喜欢我目前的设置，除了这一点。

其中一些可行，但每次发生更改时仍会继续在服务器端编译应用程序；所以我最终在需要时求助于设置serverConfig.watchOptions.ignored = [/.*/]; - 这完全停止了编译（和重新加载）:)

热重载对我来说是一场灾难。我做了一些更改，然后看起来页面重新加载，但实际上它是热加载的。关于它如何找不到这个或那个的各种错误消息，因为我重命名了它。调试器不再有正确的行号，所以我感觉在黑暗中。我必须手动重新加载页面。 hot、inline 和 liveReload 都是 false。

【参考方案1】：

适用于 webpack 2.x 和 3.x 的工作解决方案

config.devServer = 
    hot: false,
    inline: false,

【讨论】：

npm run watch -- --no-inline --no-hot 将这些选项传递给 override 配置中的内容（通过此别名到 webpack-dev-server --config config.js）

【参考方案2】：

默认情况下，webpack 客户端脚本会添加到您的包中（从 webpack 2 开始），但您可以通过在 CLI 命令中添加 --no-inline 来禁用这些脚本。

【讨论】：

我试过了，但没有用。我正在使用 webpack 1.x，该选项是否仅在 webpack 2.x 中可用？我在任何地方都找不到它：webpack.github.io/docs/webpack-dev-server.html 也没有 webpack.github.io/docs/configuration.html

啊，在 iframe 模式下，总是包含客户端脚本。有两种方法可以解决此问题； 1）删除--open，手动浏览到localhost:9005 2）添加--lazy，刷新页面时才会重新编译

似乎对 webpack 3 没有帮助。

适用于 Webpack 4

【参考方案3】：

作为一种解决方法，我从包中排除了 webpack 客户端脚本。这似乎阻止了自动重新加载的发生。我通过将这些脚本重定向到一个空加载器来做到这一点。

test: /webpack-dev-server\\client/, loader: "null-loader",

【讨论】：

为了后代：为了让它在 webpack2 和 webpack-dev-server 2.4.5 中工作，我不得不稍微修改一下。我安装了github.com/webpack-contrib/null-loader 并且不得不通过路径排除：test: path.resolve(__dirname, 'node_modules/webpack-dev-server/client'), loader: "null-loader"

^^ 这很棒。彻底解决了问题。您能否更新您的答案以包含这个额外的 webpack2 详细信息？

【参考方案4】：

这是webpack-dev-server 3.x 的更新。像这样更新您的config/webpack/development.js：

process.env.NODE_ENV = process.env.NODE_ENV || 'development';

const environment = require('./environment');

environment.config.merge(
  devServer: 
    hot: false,
    inline: false,
    liveReload: false
  
);

module.exports = environment.toWebpackConfig();

【参考方案5】：

也没有找到明显的解决方案（webpack-dev-server 版本 1.16.5）。

部分解决方案似乎是：

webpack-dev-server --watch-poll 99999999999

这不会自动重建。但它仍会在初始构建后重新加载浏览器窗口。