在前端开发中，我们常常需要使用到模块化打包工具 webpack。而 webpack-dev-server 则是 webpack 的一个插件，用来提供一个开发服务器，为我们的开发提供更加便捷的环境。
webpack-dev-server 是什么
webpack-dev-server 是一个基于 Node.js 和 Express 的开发服务器，它可以自动编译和打包代码，并且会在浏览器中实时显示修改后的结果。它还可以提供一些开发时的辅助功能，比如热更新、自动刷新等。
安装和使用
我们可以通过 npm 安装 webpack-dev-server：
npm install webpack-dev-server --save-dev
安装完成后，在项目的 webpack 配置文件中添加如下代码：
module.exports = {
// ...
devServer: {
contentBase: './dist',
hot: true
}
};其中 contentBase 指定了服务器的根目录，这里我们指定为 ./dist，表示我们的打包文件都会放在这个目录下。hot 则表示开启热更新功能。
然后我们在 package.json 文件中添加如下命令：
{
"scripts": {
"start": "webpack-dev-server --config webpack.config.js"
}
}这样我们在终端中运行 npm start 命令就可以启动 webpack-dev-server 了。
实例
我们来看一个简单的实例，首先创建一个 index.html 文件：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------------------------------- ------- ------ ---- --------------- ------- ------------------------- ------- -------
然后创建一个 index.js 文件：
document.getElementById('app').innerText = 'Hello webpack-dev-server';最后在 webpack 配置文件中添加如下代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -------------
------- -
--------- ------------
----- ----------------------- -------
--
---------- -
------------ ---------
---- ----
-
--这里我们指定 entry 为 index.js，output 为 dist/bundle.js，表示我们的打包文件会放在 dist 目录下。
然后运行 npm start 命令，打开浏览器访问 http://localhost:8080，就可以看到页面上显示了 Hello webpack-dev-server。
现在我们修改 index.js 文件：
document.getElementById('app').innerText = 'Hello webpack-dev-server, I am updated!';保存后，浏览器会自动刷新，页面上的文字也会更新为新的内容。
总结
webpack-dev-server 是一个非常实用的工具，它可以为我们的开发提供更加便捷的环境。在小型项目中使用 webpack-dev-server 可以提高我们的开发效率，同时也可以让我们更加专注于业务逻辑的实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655ef808d2f5e1655d91b076