如何禁用webpack dev server的自动重新加载？

Question

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

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

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 dev server会以自动重新加载的方式在 iframe 模式下打开初始页面 localhost:9005/webpack-dev-server/。当我将 inline 设置为 true 时，它会以 inline 模式（即WebSockets）在 localhost:9005 上打开，并仍然进行自动重载。

是否有一种方法可以完全禁用自动重新加载？

- Pawel Pabich

---

停止使用webpack-dev-server，只需根据需要运行您的构建脚本即可。 - ceejayoz

我可以，但我喜欢现在的设置，除了一件事情。 - Pawel Pabich

其中一些方法虽然有效，但每次更改后仍需要在服务器端重新编译应用程序；因此，最终我采取了设置 serverConfig.watchOptions.ignored = [/.*/]; 的方法 - 这样可以完全停止编译（和重新加载） :) - Janaka Bandara

热重载对我来说是一场灾难。我做了一些更改，然后看起来页面重新加载了，但实际上它是热加载。各种错误消息都出现了，因为我重命名了一些东西。调试器不再具有正确的行号，所以我在黑暗中摸索。我必须手动重新加载页面。热加载、内联和liveReload都是false。 - OsamaBinLogin

Answer 1

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

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

- Igor Alemasow

---

npm run watch -- --no-inline --no-hot 会将这些选项传递进去，以覆盖配置文件中的内容（通过 webpack-dev-server --config config.js 别名）。 - jimmont

Answer 2

默认情况下（自webpack 2以来），Webpack客户端脚本已添加到您的捆绑包中，但您可以通过在CLI命令中添加--no-inline来禁用它们。

- spacek33z

---

我已经尝试过了，但没有起作用。我正在使用webpack 1.x版本，这个选项只在webpack 2.x版本中可用吗？我无法在以下任何地方找到它：https://webpack.github.io/docs/webpack-dev-server.html 或 https://webpack.github.io/docs/configuration.html - Pawel Pabich

啊，在iframe模式下，客户端脚本总是被包含在内。有两种方法可以解决这个问题： 1）删除“--open”，然后手动浏览到http://localhost:9005/。 2）添加“--lazy”，这样只有在刷新页面时才会重新编译。 - spacek33z

似乎对Webpack 3没有帮助。 - mpen

适用于Webpack 4。 - Sterling Beason

Answer 3

解决方法是在打包时排除Webpack客户端脚本，看起来这样可以阻止自动重新加载。我通过将这些脚本重定向到空装载器来实现。

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

- Pawel Pabich

---

为了后人：为了让这个在webpack2和webpack-dev-server 2.4.5中工作，我不得不做一些修改。我安装了https://github.com/webpack-contrib/null-loader，并且必须通过路径排除： {test: path.resolve(__dirname, 'node_modules/webpack-dev-server/client'), loader: "null-loader"} - spirulence

这太棒了。问题完全解决了。你能否更新你的答案，包括这个额外的webpack2细节？ - Ghazgkull

Answer 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();

- Alex Dunae

Answer 5

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

部分解决方案似乎是：

webpack-dev-server --watch-poll 99999999999

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

- Thomas Weiser