Webpack 是 Web 应用程序打包工具，它可以将多个 JavaScript 文件打包成一个可运行的 Web 应用。而 @_pearofducks/webpack-plugin-serve 是一个用于在 Webpack 构建 Web 应用的过程中启动一个 HTTP 服务器的 Webpack 插件。本文将介绍如何安装并使用这个插件。
安装
首先，你需要在你的项目中安装 Webpack 和 @_pearofducks/webpack-plugin-serve：
npm install webpack @_pearofducks/webpack-plugin-serve --save-dev
使用
在你的 Webpack 配置文件中引入 @_pearofducks/webpack-plugin-serve:
const WebpackPluginServe = require('@_pearofducks/webpack-plugin-serve');然后，在 plugins 数组中添加以下代码：
plugins: [
new WebpackPluginServe({
port: 8080,
static: './dist',
liveReload: true,
}),
],这设置了 HTTP 服务器的端口号为 8080。它将静态文件托管在路径为 ./dist 的目录下。它还启用了实时重载（liveReload）功能。
现在，您可以启动 Webpack 并通过访问 http://localhost:8080 来访问您的应用程序。
指令
当您安装了 @_pearofducks/webpack-plugin-serve 插件后，您可以在命令行中使用 webpack-plugin-serve 指令来启动 HTTP 服务器。
node_modules/.bin/webpack-plugin-serve --open
这将在浏览器中打开您的应用程序。
除此之外，您还可以使用以下选项：
--config指向指定的 Webpack 配置文件。--env指定 Webpack 配置文件中的env对象属性。
示例代码
以下是一个示例 Webpack 配置文件内容：
-- -------------------- ---- -------
----- ------------------ - ----------------------------------------------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- -------------------- --------
--
-------- -
--- --------------------
------- ---------
----------- -----
---
--
--这里的配置文件指定了应用程序的入口点和输出点，并启动了一个 HTTP 服务器，将主机了 ./dist 文件夹中的文件，并启用实时重载。
总结
本文介绍了如何安装和使用 @_pearofducks/webpack-plugin-serve 这个 Webpack 插件，以及如何使用命令行选项来自定义 HTTP 服务器的行为。使用这个工具可以使您的开发过程更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671048dd3466f61ffdc9f