简介
在前端开发中，Webpack 是一个广泛使用的打包工具。在使用 Webpack 进行开发时，我们通常需要启动一个本地服务器来测试我们的代码是否正常工作。@webpack-cli/serve 便是一个基于 Webpack 的本地开发服务器。
安装
可以通过 npm 进行安装：
npm install -g @webpack-cli/serve
启动服务器
在安装完成后，我们就可以通过如下命令启动服务器：
webpack serve
默认情况下，@webpack-cli/serve 只会监听 8080 端口，而且只会监听本地 localhost，在其他本地 IP 或者公网 IP 上是无法访问的。同时，启动时如果没有指定配置文件，它会使用默认的 webpack.config.js 文件。
为了启动一个监听其他本地 IP 的服务器，可以通过如下命令修改监听的 IP：
webpack serve --host 0.0.0.0
同时，如果你需要指定特定的配置文件，在启动时添加 -c 或 --config 参数即可，例如：
webpack serve -c my.config.js
配置
除了在启动时指定配置文件外，我们还可以重新定义一些默认的配置选项。在项目根目录下新建一个 webpack.config.js 文件，然后添加如下配置：
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist',
publicPath: '/'
}
};在这个配置文件中，我们定义了 entry 和 output 选项。entry 选项告诉 Webpack 在哪里寻找应用的起点模块，而 output 选项则告诉 Webpack 在哪里输出打包完成的文件。
使用示例
我们来创建一个简单的示例，通过 @webpack-cli/serve 启动一个本地服务器。
首先我们新建一个 index.html 文件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------------
-------
------
------- --------------------------
-------
-------然后在 src 目录下新建一个 index.js 文件：
document.write("Hello Webpack!");接下来，我们在终端中进入项目的根目录，执行以下命令：
webpack serve --open
这个命令将会启动一个本地服务器，并打开默认浏览器，在浏览器中访问 http://localhost:8080/ 可以看到页面中输出了 "Hello Webpack!"。
总结
通过本文的介绍，我们了解了如何安装、启动和配置 @webpack-cli/serve。除此之外，我们还通过一个简单的示例学习了如何利用 @webpack-cli/serve 进行本地开发。希望这篇文章对于你了解 @webpack-cli/serve 有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedade4b5cbfe1ea0610d36