Webpack-dev-server 是 Webpack 官方推出的一个开发服务器，在前端开发过程中非常常用，它能够自动监测代码变化，自动更新页面。本文将详细介绍 Webpack-dev-server 的配置和使用方法。
安装
Webpack-dev-server 可以通过 npm 安装：
npm install webpack-dev-server --save-dev
基本使用
在安装完 Webpack-dev-server 之后，我们需要在 webpack.config.js 中进行配置，以便使用它。配置很简单，只需要在配置文件中加入以下内容即可：
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
port: 8080,
open: true
}以上配置中：
contentBase：指定服务器从哪个目录提供文件，默认情况下是项目根目录。port：指定服务器的端口号，默认为 8080。open：是否自动打开浏览器窗口，默认为 false。
在配置好 devServer 之后，我们可以在 package.json 中添加以下脚本：
"scripts": {
"start": "webpack serve --open"
}这样，我们就可以使用命令行运行 npm start 以启动 Webpack-dev-server。
更多配置选项
除了基本配置之外，Webpack-dev-server 还提供了很多高级配置选项。
historyApiFallback
对于单页应用程序（SPA），通常会使用 HTML5 History API 来实现路由。这个时候需要配置 historyApiFallback，以避免在路由刷新时出现 404 错误。我们可以将这个选项配置如下：
devServer: {
historyApiFallback: true
}当我们访问一个不存在的路由时，Webpack-dev-server 会返回 index.html 页面，这个页面会在浏览器端进行路由跳转。
hot
Webpack-dev-server 的热重载功能非常实用，它可以在不刷新页面的情况下实时更新代码。我们可以将 hot 配置设为 true 来启用热重载：
devServer: {
hot: true
}除了这些基本的配置之外，Webpack-dev-server 还提供了很多其他的高级选项，这里不再一一列举。如果你需要了解更多配置细节，可以查阅官方文档。
示例代码
完整的 Webpack-dev-server 配置示例代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- --------------------
---------- -
------------ ----------------------- --------
----- -----
----- -----
------------------- -----
---- ----
--
-------- -
--- ------------------------------------
-
--执行 npm start 命令，就可以启动开发服务器进行开发了。
总结
本文介绍了 Webpack-dev-server 的基本配置和高级选项，同时也给出了一个完整的示例代码。使用 Webpack-dev-server 可以大大提高前端开发效率，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb38215ad90b6d041f4bc4