前言
随着前端技术的不断发展，前端项目的复杂度也越来越高，为了提高项目开发的效率及便捷性，一些工具和框架被广泛应用于前端开发中。其中，Webpack 是目前前端领域中使用最广的打包工具之一，许多前端项目都使用它来处理文件，优化项目。在Webpack中，webpack-dev-server是一个非常重要的功能，可以提供一个本地服务器来实时编译和监听代码的变化。
本文介绍了webpack-dev-server的使用方法及13个小技巧，希望对前端工程师们有所帮助。
什么是webpack-dev-server？
webpack-dev-server是Webpack官方提供的一个开发服务器，它可以在本地搭建一个服务器环境，允许进行实时编译和监听代码的变化，以便及时更新页面。每当代码发生变化时，webpack-dev-server会自动重新编译并刷新页面，大大提高了开发效率。
webpack-dev-server不仅提供了热重载、自动刷新等开发效率的功能，还可以与其他工具一起使用，如webpack-dev-middleware、static-server等。
webpack-dev-server使用方法
安装
安装webpack-dev-server前，需要先安装Webpack。
npm install webpack webpack-dev-server --save-dev
配置
在webpack的配置文件中加入devServer的相关配置。
module.exports = {
// ...
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000
}
};配置项说明：
- contentBase: 需要提供给浏览器的文件地址，一般为dist或public目录下的html文件
- compress: 是否开启gzip压缩
- port: 端口号，默认为8080
运行
在命令行输入以下命令即可启动开发服务器，打开浏览器访问 http://localhost:9000。
npx webpack-dev-server
13个小技巧
1. 自动打开浏览器
默认情况下，webpack-dev-server不会自动打开浏览器。可以在启动命令后加上 --open，来实现自动打开浏览器的功能。
npx webpack-dev-server --open
2. 热重载
热重载是webpack-dev-server的核心功能之一，可以实现在不刷新页面的情况下更新代码。通过添加 --hot 参数启用该功能。
npx webpack-dev-server --hot
在使用webpack 5时，还需在webpack配置文件中添加如下代码：
module.exports = {
// ...
devServer: {
hot: true
},
// ...
};3. 去除build信息
默认情况下，webpack-dev-server启动时，会在终端输出许多构建信息，可以通过添加--quiet参数来关闭这些信息。
npx webpack-dev-server --quiet
4. 指定默认目录
设置默认目录，相当于设置了 contentBase。
# 指定当前目录作为默认目录 npx webpack-dev-server --content-base .
5. 指定Webpack配置文件
使用不同的webpack配置文件启动不同的开发环境。
# 指定自定义配置文件 npx webpack-dev-server --config my.config.js
6. https协议
默认情况下，webpack-dev-server使用http协议，可以通过指定 --https 参数开启https协议。
npx webpack-dev-server --https
7. 多入口文件
在Webpack中，可以使用多个入口文件进行开发。在运行webpack-dev-server时，可以使用 --inline 参数来开启多入口模式。这个模式下，Webpack会自动检测文件更改并刷新多个模块，以节省时间。
npx webpack-dev-server --inline
8. 提供静态资源
可以通过添加 --content-base 参数来创建静态资源服务器，实现静态文件的快速访问。
npx webpack-dev-server --content-base ./resources
9. 配置代理
通过配置代理，可以在开发过程中避免跨域请求的问题。
-- -------------------- ---- -------
-------------- - -
-- ---
---------- -
-- ---
------ -
------- -
------- ---------------------------
------------- -----
------- -----
-
-
-10. 打包速度优化
在使用css-loader进行打包时，因为css的解析耗时很长，因此可以将css单独打包，减少每次开发时的时间花费。
-- -------------------- ---- -------
-------------- - -
-- ---
---------- -
-- ---
------------- -
-------- -----------------
----------------- ----
----- ---- -- ---------
-
-
-11. 调试工具
除了在终端查看打印信息以外，还可以在浏览器中调试打印信息。可以通过 --devtool 参数配置webpack-dev-server在浏览器中为我们提供哪些调试工具, 如：
npx webpack-dev-server --devtool eval-cheap-module-source-map
12. 延迟代码编译
如果想要使用 webpack-dev-server，同时也想延迟代码的编译，可以使用lazy: true配置。
-- -------------------- ---- -------
-------------- - -
-- ---
---------- -
------------ -------------------- --------
--------- -----
----- -----
----- -----
-
--13. vscode配置
在启动VSCode的同时，自动启动webpack-dev-server。首先在VSCode中安装npm插件或其他的集成终端插件，然后在VSCode → Preferences → Settings → Search settings中搜索“terminal.integrated.shell.windows”，并将其值设为：
"C:\\windows\\System32\\cmd.exe"
以确保在集成终端下运行时，使用Windows的命令提示符。
-- -------------------- ---- -------
-
------- ---- --------------------
------- --------
---------- ---- --------------------
-------- -
------- -------
------------ ----
-
-然后，在 Launch.json 中添加以下代码：
{
"type": "chrome",
"request": "launch",
"name": "chrome",
"url": "http://localhost:9000",
"webRoot": "${workspaceFolder}/src",
}最后，在 Tasks.json 文件添加启动 webpack-dev-server 的任务：
-- -------------------- ---- -------
-
----------- -------------------
---------- ---------------------------------
------- ------ ------ ------ -------
----------------- -----
-------- -
------- --------
------------ ----
--
----------------- --
-结论
webpack-dev-server提供了许多方便的工具和插件，可以帮助开发者更高效地开发前端代码。本文介绍了webpack-dev-server的使用方法及13个小技巧，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670cfa075f551281025c257c