Webpack 是一款前端代码打包工具，可以将多个 js 文件、css 文件、图片等资源文件打包成一份或多份静态资源文件（bundle），便于在浏览器上加载。同时，Webpack 的热更新功能也使得开发体验更加流畅。本文将介绍如何使用 Webpack 构建后启动本地服务的方法。
准备工作
在开始之前，我们需要安装 Node.js 和 NPM。安装完成后，我们可以在终端上输入以下命令来检验版本是否安装成功：
node -v npm -v
接下来，我们需要创建一个项目，并安装 Webpack 和 webpack-dev-server。打开终端，输入以下命令：
mkdir my-project cd my-project npm init -y npm install --save-dev webpack webpack-cli webpack-dev-server
在执行上述命令后，我们创建了一个名为 my-project 的项目，并在项目目录下初始化并安装了 Webpack 和 webpack-dev-server。Webpack CLI 是 Webpack 的命令行工具，它使我们可以在命令行上使用 Webpack。
配置 Webpack
在项目根目录下创建一个名为 webpack.config.js 的文件，并添加以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
--这是一个最简单的 Webpack 配置文件，我们将源文件入口指定为 ./src/index.js，输出文件为 ./dist/bundle.js。
配置 webpack-dev-server
webpack-dev-server 是 Webpack 的开发服务器，可以在本地启动一个 HTTP 服务器，允许实时重新加载文件或模块。webpack-dev-server 需要在 Webpack 配置文件中进行配置。
我们需要在 webpack.config.js 中添加以下内容:
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
---------- -
------------ ----------------------- --------
--------- -----
----- -----
--
--在上述代码中，我们向 Webpack 配置对象中添加了 devServer 属性，contentBase 指定了 Webpack 打包后静态文件的路径，在本例中，即为 ./dist。compress 是一个 Boolean 参数，如果设置为 true，表示开启 gzip 压缩。port 则是我们在本地启动 HTTP 服务的端口号，这里设置为 3000。
启动本地服务
编写完 Webpack 配置文件后，我们可以直接在命令行中输入以下命令启动本地服务：
npx webpack-dev-server
Webpack 会自动打包源码，并启动一个 HTTP 服务器，本地服务器的地址为 http://localhost:3000。
热更新
当我们修改源代码时，Webpack 会自动重新打包，并通过 SockJS（WebSocket 通信技术）与客户端通信，更新页面内容。这样，我们就可以在不刷新页面的情况下，快速预览修改后的效果。但是需要注意，Webpack 的热更新只能在开发环境下使用。线上环境需要注意版本兼容等问题。
示例代码
为了演示 Webpack 构建后启动本地服务的方法，我们编写了一个简单的代码示例，可以放在 ./src 目录下。
// ./src/index.js
const sayHelloTo = (name) => console.log(`Hello ${name}`);
sayHelloTo('Webpack');在命令行中输入 npx webpack-dev-server 后，我们可以在浏览器中打开地址 http://localhost:3000/，控制台将输出 Hello Webpack。
结论
通过本文的介绍，我们可以使用 Webpack 配置文件和 webpack-dev-server 轻松地构建本地服务器，提高前端项目开发效率并改善开发体验。同时，热更新功能也使得前端开发更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673300180bc820c5823ff4c4