从零开始的 Webpack 入门：快速搭建开发环境并运行程序

Webpack Dev Server 介绍

Webpack Dev Server 是一个用于在开发环境中运行和测试 Webpack 应用程序的工具。它提供了许多有用的功能，包括：

• 快速构建和运行应用程序： Webpack Dev Server 可以快速地将您的 JavaScript 模块和样式文件捆绑在一起，以便您可以在浏览器中运行和测试应用程序。
• 热模块更换（Hot Module Replacement，HMR）： HMR 允许您在更改文件后，无需重新加载页面即可更新应用程序。这使您可以更快地进行开发和测试。
• Webpack Watcher： Webpack Watcher 会监视您的源文件，并在文件更改后自动重新构建应用程序。这可以帮助您在开发过程中保持代码的最新状态。
• 浏览器同步（Browser-sync）： Browser-sync 允许您在多个浏览器中同步您的应用程序。这对于在不同设备上测试应用程序非常有用。
• 代理和中间件： Webpack Dev Server 可以配置为使用代理和中间件。这允许您将请求转发到其他服务器，或者在请求到达应用程序之前对其进行处理。

Webpack Dev Server 4.0.0-beta.2 新特性

Webpack Dev Server 4.0.0-beta.2 引入了许多新特性，包括：

• 移除了 openPage 选项和 --open-page CLI 选项： openPage 选项和 --open-page CLI 选项已被 {open: ['/my-page', '/my-other-page/']} 和 --open-target [URL]（没有 [URL] 开发服务器将使用 host 选项值打开浏览器）取代。这提供了更多的灵活性，并允许您在启动开发服务器时指定要打开的页面。
• 改进了 HMR： HMR 现在可以更好地处理 CSS 和 SASS 文件的更改。它还可以更好地处理 JavaScript 文件的更改，即使这些文件是在多个模块中引用的。
• 改进了 Webpack Watcher： Webpack Watcher 现在可以更好地处理大型项目的更改。它还可以更好地处理符号链接和别名。
• 改进了代理和中间件： 代理和中间件现在可以更好地处理 HTTPS 请求。它们还可以更好地处理来自不同来源的请求。

如何使用 Webpack Dev Server

要使用 Webpack Dev Server，您需要先安装它。您可以使用以下命令安装它：

npm install --save-dev webpack-dev-server

安装完成后，您可以使用以下命令启动开发服务器：

webpack-dev-server

这将启动开发服务器，并将其监听在端口 8080 上。您可以通过在浏览器中输入 http://localhost:8080 来访问应用程序。

结论

Webpack Dev Server 是一个用于在开发环境中运行和测试 Webpack 应用程序的强大工具。它提供了许多有用的功能，可以帮助您提高开发效率。如果您还没有使用 Webpack Dev Server，我强烈建议您尝试一下。