如何使用 Webpack 配置 Webpack-dev-server

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 加速开发过程。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67803476ce7f48612531eeb4