Webpack 是一个强大的前端打包工具，它可以打包、压缩和优化文件。同时，Webpack 还提供了本地开发服务器，可以帮助我们快速开发和调试。在本文中，我们将学习如何配置 Webpack 本地开发服务器，以提高开发效率。
安装 Webpack
要安装 Webpack，我们需要先安装 Node.js 和 npm。然后，通过 npm 可以安装最新的 Webpack 版本。打开命令行窗口，运行以下命令：
npm install -g webpack
这样就可以全局安装 Webpack 了。
创建新项目
在开始配置本地开发服务器之前，我们需要先创建一个新项目。在命令行窗口中，进入一个新的文件夹，并运行以下命令：
npm init -y
这将创建一个新的 npm 项目，并默认使用 package.json 文件。
然后，我们需要安装 Webpack，Webpack dev server 和一些其他依赖项。我们可以在命令行窗口中运行以下命令来安装它们：
npm install --save-dev webpack webpack-dev-server html-webpack-plugin
上面的命令将会安装最新的 Webpack 版本、Webpack dev server 和一个 Webpack 插件 html-webpack-plugin。Webpack dev server 是用于启动本地开发服务器的包。
配置 Webpack
接下来，我们需要配置 Webpack。在项目根目录创建一个新的文件夹，并命名为“src”。在 src 文件夹中创建一个新的文件 index.js，用于编写一些 JavaScript 代码。
我们需要在项目根目录中创建一个新的 Webpack 配置文件 webpack.config.js，该文件将指导 Webpack 如何处理我们的代码。此外，我们还需要创建一个新的 HTML 文件，用于将我们的 JavaScript 代码插入到 HTML 中。将以下代码添加到 webpack.config.js 文件中：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- -------------------
--------- -------------------
--------- --------------
--
-
--以上代码告诉 Webpack 入口文件为 index.js，在输出文件夹 dist 中生成 bundle.js 文件。同时，我们还指定了一个 HtmlWebpackPlugin，它将生成一个 HTML 文件并将 bundle.js 插入其中。
我们还需要在项目根目录中创建一个新的文件 index.html，将以下代码添加到该文件中：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- -------------- --- -------------- ------- ------ ---- --------------- ------- ------------------------- ------- -------
这个 HTML 文件中，我们只是简单地创建了一个空的 div 元素，Webpack 将 bundle.js 插入其中。
配置本地开发服务器
Webpack 本地开发服务器的最基本配置如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ------- - -------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----------- ---
--
---------- -
------------ -------------------- --------
--------- -----
----- ----
--
-------- -
--- -------------------
--------- -------------------
--------- --------------
---
--- ------------------------------------
--
----- -------------
--在上面的代码中，我们添加了一个新的配置项 devServer。这里定义了开发服务器的一些属性。例如，contentBase 指示 Webpack 将哪个文件夹作为包含 HTML、CSS、图片等静态文件的源目录，compress 指示 Webpack 是否使用 gzip 压缩，port 指示 Webpack 将在哪个端口上运行。在本例中，我们使用端口 9000 运行 Webpack。publicPath 指示要提供bundle的相对路径。
我们将这段代码添加到 webpack.config.js 文件中。
现在，运行以下命令，打开浏览器访问 http://localhost:9000。Webpack 将启动本地开发服务器，您将看到一个空白页面。现在，在 index.js 文件中添加一些 JavaScript 代码，保存文件后，Webpack 将重新编译代码，并将其插入到页面中。如有 变化，刷新网页即可看到界面的更新。
结论
在本文中，我们学习了如何配置 Webpack 开发服务器。这给我们提供了一种方法来加快开发流程，让我们可以毫不费力地编写代码并立即在浏览器中看到变化。接下来，您可以尝试更多的配置选项和插件，以根据您的需求进一步优化和改进 Webpack 环境。
代码示例：https://github.com/jessezhao1990/webpack-dev-server-example。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d1865a336082f2548ace6