什么是 webpack-dev-server？
webpack-dev-server 是一个开发服务器插件，它能够提供静态资源服务器和代码变化监听功能，让开发者可以实时预览到编译后的代码变化效果。它还支持热替换，即不需要刷新浏览器就能够更新页面上的变化。
这个插件主要解决了开发周期中开发者频繁手动刷新页面的问题，让开发者可以更加高效地进行开发。它可以与 webpack 搭配使用，支持多种语言和框架。
如何使用 webpack-dev-server？
安装 webpack-dev-server：
npm install webpack-dev-server --save-dev
在 webpack 配置文件中进行配置：
-- -------------------- ---- -------
----- ------ - -
-- --- ---- ---
---------- -
------------ -------------------- -------- -- - ---- ------------
--------- ----- -- -- ---- --
----- ----- -- ---- ----
---- ----- -- -----
----- ----- -- -------
--
-运行 webpack-dev-server：
npx webpack-dev-server
webpack-dev-server 的配置项
contentBase
告诉服务器从哪里提供内容。即：将 dist 目录下的文件作为静态资源。
compress
启用 gzip 压缩。
port
服务器监听的端口号。
hot
启用热替换（HMR）功能。开启后，通过 webpack 支持的 HMR API 实现代码变化的热替换。
open
自动打开浏览器。
webpack-dev-server 的事件
before
在服务启动时会执行此事件。可以通过这个事件在服务启动前去下载一些额外的依赖、打一下 log 等。
-- -------------------- ---- -------
----- ------ - -
-- ----------
---------- -
----------- ------- -
--------------------- ----- ---- -- -
----------- --- -- ----- ------- -- - --- -- ----- ----- ---
--
-
-
-after
在服务启动后会执行此事件。可以在服务启动后执行一些额外的操作，比如打开某些特定的页面。
-- -------------------- ---- -------
----- ------ - -
-- ----------
---------- -
---------- ------- -
------------- -- -
------------------- -- ---------
----------------------------
-- -----
-
-
-webpack-dev-server 的优缺点
优点
- 提高开发效率。可以不用手动刷新页面，也不用重新编译代码。
- 支持热更新，能够实现模块和组件的无刷新替换。
- 代码变动时能够即时在浏览器中看到效果。
- 支持多种语言和框架，比如 React、Vue、Angular、TypeScript 等。
缺点
- 不能很好地与 Server-Side Rendering 结合使用。
- 不能满足一些特殊需求，比如请求转发等。
总结
webpack-dev-server 是一个十分实用的开发服务器插件，可以极大地提高前端开发效率。同时，开发者需要注意一些使用细节，比如与 Server-Side Rendering 的结合使用等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6500fbc295b1f8cacded7d71