webpack "--watch" 和 "--hot" 的区别是什么？

Question

使用什么有什么区别呢？

webpack --watch

和

webpack-dev-server --hot

谢谢。

- Niner

Answer 1

根据webpack文档 @ https://webpack.github.io/docs/tutorials/getting-started/#watch-mode，使用观察模式时，webpack会为编译过程中使用的所有文件安装文件监视器。如果检测到任何更改，它将重新运行编译。启用缓存后，webpack会将每个模块保存在内存中，如果未更改，则会重复使用它。

所以，基本上，运行webpack和webpack --watch的区别在于使用--watch时，CLI将在编译过程后挂起等待文件中的任何代码更改，如果有更改，则重新编译并再次等待。您应该知道，如果您正在使用webpack-dev-server，则不需要使用此选项，因为根据其文档，webpack-dev-server默认使用webpack的监视模式：

The dev server uses webpack’s watch mode. It also prevents webpack from emitting the resulting files to disk. Instead it keeps and serves the resulting files from memory.

那么，webpack-dev-server --hot是什么呢？基本上，这将在webpack配置中添加HotModuleReplacementPlugin，这将允许您只重新加载更改的组件，而不是进行完整的页面刷新！当您使用状态时非常有用！根据文档：

Each mode also supports Hot Module Replacement in which the bundle is notified that a change happened instead of a full page reload. A Hot Module Replacement runtime could then load the updated modules and inject them into the running app.

更多关于它是什么以及如何使用的信息，请参见https://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement。

希望这有助于更好地理解webpack！

- Cheng Sieu Ly

---

如果我只是在 Windows 上使用 IIS，那么我不需要运行 webpack-dev-server 对吗？ - Niner

是的，没错。所以，假设你在 watch mode 下运行了 webpack，并将编译后的文件输出到“dist”文件夹中，在 IIS 中，你需要指向这个“dist”目录。当你进行更改时，“dist”文件夹中的所有文件都会被新的编译文件替换。此时你需要手动点击浏览器中的刷新按钮才能看到更改，这可能会让开发过程变得烦人。 - Cheng Sieu Ly

Answer 2

简而言之， --watch 意味着：监听文件变化，当源文件发生变化时重新编译。 --hot（热重载）意味着：当源代码发生更改时，不重新加载整个页面，而只是重新加载更改的部分。

- yaya

---

尽管顶部答案更为详尽，但得到一个两行摘要也很好。 - Cameron