webpack“ --watch”与“ --hot”:有什么区别?

网络包 Webpack

Stafan

2020-03-24

使用之间有什么区别

webpack --watch

webpack-dev-server --hot

谢谢。

第3368篇《webpack“ --watch”与“ --hot”:有什么区别?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
Itachi 2020.03.24

根据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.

So, what is webpack-dev-server --hot? Basically, this adds the HotModuleReplacementPlugin to the webpack configuration, which will essentially allow you to only reload the component that is changed instead of doing a full page refresh! Pretty darn useful when you are working with states! According to the documentation:

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.

More information on what it is and how to used it here: https://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement

I hope this helps in understanding webpack a bit more!

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android