在开发前端应用时，我们经常需要使用 Service Worker 来进行离线缓存和静态资源管理。而 cc-sw-precache-webpack-plugin 则为我们提供了一个方便的 webpack 插件，可以自动地生成 Service Worker 并且预缓存我们指定的静态资源。
安装
$ npm install cc-sw-precache-webpack-plugin --save-dev
配置
使用 cc-sw-precache-webpack-plugin 需要在 webpack 配置文件中进行以下配置：
-- -------------------- ---- -------
----- ------------------------- - ----------------------------------------
-------------- - -
-- ---
-------- -
--- ---------------------------
-------- ---------
--------- -------------
------------------------------ ---------
---------------- -
-------------------------------------------------
--
------------ --------
--------------- --
----------- ----------
-------- --------------
--
--
-
-其中，各个选项的含义如下：
cacheId：缓存应用的唯一标识符，会在 Service Worker 中用到。filepath：生成的 Service Worker 的路径。maximumFileSizeToCacheInBytes：最大允许缓存的文件大小（以字节为单位）。staticFileGlobs：需要在 Service Worker 中缓存的文件的路径模式。stripPrefix：需要在匹配到的文件路径中移除的前缀。runtimeCaching：动态缓存规则。
示例代码
以下是一个使用 cc-sw-precache-webpack-plugin 进行离线缓存的 webpack 配置示例：
-- -------------------- ---- -------
----- ------- - ------------------
----- ---- - ---------------
----- ----------------- - ------------------------------
----- ------------------------- - ----------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- -------------------
--------- ----------------
---
--- ---------------------------
-------- ---------
--------- -------------
------------------------------ ---------
---------------- -
-------------------------------------------------
--
------------ --------
--------------- --
----------- ----------
-------- --------------
--
--
-
-之后，在使用 webpack 进行构建时，cc-sw-precache-webpack-plugin 将会自动为我们生成 Service Worker 并进行静态资源预缓存。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cc481e8991b448e6437