前言
在前端开发中，经常需要调试样式或者 JS 相关代码逻辑，传统方法就是修改代码后刷新页面，这样操作起来就比较繁琐。这时候我们就需要用到 webpack-dev-server 这个工具来实现自动刷新，使得我们的开发效率得到提升。
webpack-dev-server 是什么？
webpack-dev-server 是 webpack 官方提供的一个小型 Express 服务器，它使用 webpack-dev-middleware 中间件来编译打包 JavaScript，然后将编译好的文件 serv 到 server 上，并且通过 WebSocket 协议在后台和前端之间建立起一个长连接，当文件变化时就可以重新编译相应的代码，并且实时将改变的部分传递给浏览器，从而实现浏览器的实时刷新。
安装 webpack-dev-server
在命令行窗口中执行以下命令安装：
npm install webpack-dev-server --save-dev
配置 webpack-dev-server
在 webpack 的配置文件中，我们需要对 webpack-dev-server 进行如下配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ ----------------- -- ----
------- -
--------- ------------ -- ----
----- ----------------------- ------- -- ----
--
---------- - -- ---- --------------
------------ --------- -- -----
---- ----- -- -------
--
------- -
-- ---------- ------ --
--
-------- -
--- ------------------------------------ -- ----- ------- --
-
--在项目中使用 webpack-dev-server
在 package.json 中新增如下命令行：
{
"name": "my-project",
"version": "1.0.0",
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
}在命令行窗口输入 npm start 启动项目，即可在浏览器看到自动刷新的效果了。
注意事项
- webpack-dev-server 要求 Node.js 版本需在 v7.6.0 以上，需要配置 Node.js 和 npm 的环境变量。
- 由于使用热更新会影响页面性能，因此不应使用在生产环境中。
总结
使用 webpack-dev-server 可以提升 web 前端开发效率，实现热更新功能是在这个过程中必不可少的。相信本文能够帮助您更好地理解和掌握 webpack-dev-server 的使用方法。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461c027968c7c53b0319645