Webpack 是前端开发必不可少的工具之一，它可以将多个模块打包成一个文件，提高网站性能。而 webpack-dev-server 则是 webpack 的一个插件，它可以创建一个开发时的服务器，并且可以自动刷新页面。本文将详细介绍如何使用 Webpack 配置 Webpack-dev-server。
安装 Webpack 和 Webpack-dev-server
首先需要安装 Webpack 和 Webpack-dev-server。在安装之前需要确保已经安装了 Node.js 和 npm。打开终端或命令行，运行以下命令：
npm install webpack webpack-cli webpack-dev-server -g
完成之后，可以使用 webpack -v 和 webpack-dev-server -v 检查 webpack 和 webpack-dev-server 是否已经成功安装。
配置 Webpack-dev-server
Webpack-dev-server 的配置非常简单，只需要在 webpack 配置文件中添加以下代码：
devServer: { contentBase: path.join(__dirname, "public"), // 指定 Webpack-dev-server 启动的静态资源所在目录 port: 8080, // 指定 Webpack-dev-server 监听的端口号 hot: true, // 开启热替换 open: true // 自动打开浏览器 }
配置热替换
开启热替换可以在修改代码后自动刷新页面，而不会阻止开发进程。在 webpack.config.js 文件中添加以下代码：
devServer: { hot: true }, plugins: [ new webpack.HotModuleReplacementPlugin() ]
使用 webpack-dev-server 启动之后，只要修改了代码，就可以在不刷新页面的情况下，立即查看代码修改的效果。
配置自动刷新
如果不需要热替换，也可以使用自动刷新。在 webpack.config.js 文件中添加以下代码：
devServer: { watchContentBase: true }
这样，只要文件发生更改时，Webpack-dev-server 将自动重新加载页面。
示例代码
下面是一个简单的示例代码，用于演示如何使用 Webpack 配置 Webpack-dev-server：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------- - ------------------- -------------- - - ------ ----------------- ------- - ----- -------------------- ---------- --------- ----------- -- ---------- - ------------ -------------------- ---------- ----- ----- ---- ----- ----- ----- ----------------- ---- -- -------- - --- ------------------------------------ - --展开代码
以上是如何使用 Webpack 配置 Webpack-dev-server 的全部内容。希望本文对大家有所帮助，让大家更好地使用 Webpack-dev-server 加速开发过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67803476ce7f48612531eeb4
