PWA（Progressive Web App）是一种新型的 Web 应用程序，它可以像本地应用程序一样提供体验，并且具有许多现代 Web 应用程序所具备的功能。在 PWA 中，一个关键的概念是服务工作线程（Service Worker）。服务工作线程是一种独立于 Web 页面的脚本，可以拦截网络请求，并使应用程序即使在无法访问网络的情况下依然可以运行。在本文中，我们将学习如何使用 webpack 打包 PWA 应用程序。
准备工作
在开始打包 PWA 应用程序之前，我们需要安装一些必要的工具和库。具体如下：
- Node.js：用于运行 JavaScript 代码的开发平台。
- npm：是 Node.js 的包管理器，用于安装和管理 JavaScript 包。
- webpack：一个用于打包和构建 JavaScript 应用程序的工具。我们可以使用 webpack 来处理应用程序的所有逻辑。
- webpack-dev-server：一个用于在开发过程中提供服务器的工具，可以在本地开发环境中进行热重载。
- workbox-webpack-plugin：一个用于生成服务工作线程（Service Worker）的 webpack 插件，可以使 PWA 应用程序具有离线支持和高效缓存等能力。
你可以使用以下命令安装上述工具和库：
npm install --save-dev webpack webpack-cli webpack-dev-server workbox-webpack-plugin
创建项目
接下来，我们将在本地创建一个新的 webpack 项目，并将其设置为可执行 PWA 应用程序。
- 首先，在终端中创建一个新的项目目录，并进入该目录。
mkdir my-pwa-app && cd my-pwa-app
- 初始化项目并创建 package.json 文件。
npm init -y
- 创建 src 和 public 文件夹，用于存放源代码和 Web 页面资源。在 public 目录中，我们需要至少创建一个 HTML 文件，并在其中包含应用程序的入口文件。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
----- ---------------------------- ------------------
---------- -----------
-------
------
---- ---------------
------- ------------------------------
-------
-------以上代码将应用程序的入口文件设置为 src 目录下的 index.js 文件。我们将在下一节中创建此文件。
- 创建 webpack 配置文件 webpack.config.js 并进行基本配置。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ------------- - ----------------------------------
-------------- - -
------ -----------------
------- -
--------- ----------
----- ----------------------- --------
--
-------- -
--- -------------------
------ ---- -----
--------- --------------------
---
--- --------------------------
------------- -----
------------ -----
---
--
--以上配置解释如下：
- entry：设置应用程序的入口文件。
- output：设置应用程序的输出文件名和路径。
- plugins：使用 HtmlWebpackPlugin 和 WorkboxPlugin 插件。
- 在 src 目录下创建 index.js 文件，并编写应用程序代码。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
----- --- - -- -- -
-----
---------- ---------
------ --- --- ---- --- ---- ------- ---- ------- -----------
------
--
-------------------- --- --------------------------------以上代码使用 React 和 ReactDOM 库创建一个简单的应用程序。您可以更改应用程序代码以适配您的需求。
运行项目
现在我们已经完成了项目的创建和配置。接下来，让我们在本地运行它，以便可以测试 PWA 功能，并且在开发过程中可以立即看到更改的结果。
- 使用 webpack-dev-server。
npx webpack serve --open
- 运行成功后，应该可以在浏览器中看到应用程序的页面。您还可以在开发者工具中查看 Service Worker 是否正在运行。
打包项目
现在已经完成了本地测试，我们可以根据应用程序的需要使用 webpack 进行打包。
npx webpack --mode production
以上命令将生成一个 production 模式的包，该包将会自动包含在您的服务端或 CDN 上，并可以用于向终端用户分发您的 PWA 应用程序。
结论
在本文中，我们学习了如何使用 webpack 打包 PWA 应用程序。首先，我们安装了必要的工具和库。然后，我们创建了一个新项目并编写了应用程序代码。最后，我们运行了项目以在本地进行测试，并使用 webpack 将其打包到生产环境。
使用本文中的指导，您可以开始创建自己的 PWA 应用程序，并将其部署到生产环境中。我们强烈建议您在生产环境中使用 HTTPS 和 SSL，以获得更好的安全性和更好的浏览器兼容性。
完整示例代码：GitHub
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671f5e202e7021665efd3ef1