使用 Webpack 仅使用 Workbox 插件构建服务工作者代码 -> 无法指定用于预缓存的入口目录

Posted 2023-03-10

【中文标题】使用 Webpack 仅使用 Workbox 插件构建服务工作者代码 -> 无法指定用于预缓存的入口目录

【英文标题】：Using Webpack to just build service worker code with Workbox plugin -> cannot specify entry directory for pre-caching

【发布时间】：2021-06-23 09:29:13

【问题描述】：

我已经使用 Workbox CLI 成功构建了 service worker 代码。

现在我希望让 Webpack 运行相关插件并相应地准备 SW 代码。

我的网站 90% 是静态的，它的静态文件（html 和 css）位于 httpdocs/ 目录树中。在同一个目录下，我希望 Workbox 创建所有的 service worker 代码。

我的 webpack 配置文件很简单：

const WorkboxPlugin = require('workbox-webpack-plugin');

module.exports = 
  mode: 'development',
  entry: , // tried a lot of variations of this - please read later
  plugins: [
    new WorkboxPlugin.GenerateSW(
      clientsClaim: true,
      skipWaiting: true,
      swDest: 'httpdocs/sw.js',
      include: [/\.(?:html|css)$/], // in precaching
      exclude: [/\.(?:png|jpg|jpeg|svg)$/], // from precaching
      runtimeCaching: [
         // runtime cache for images
          urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
          handler: 'cacheFirst',
          options: 
            expiration:  maxEntries: 10 ,
            cacheName: 'images',
          ,
        ,
      ],
    ),
  ],
;

我尝试使用的 NPM 任务如下：

"build-workbox": "webpack --config=config/webpack.workbox.js"

我在 package.json 中的 webDependencies 如下：

"devDependencies": 
  "webpack": "^5.1.3",
  "webpack-cli": "^4.1.0",
  "workbox-webpack-plugin": "^6.1.2"

构建运行，但创建的 service worker 没有预缓存文件。 这告诉我 WorkboxPlugin 没有扫描 httpdocs/ 目录；我不能责怪它，因为我在配置中没有看到将信息提供给插件的地方。另一方面，插件在我指定的地方正确地编写了 service worker 代码。

我看到的基本问题是如何指定预缓存的入口点：

如果我向 Webpack 提供 entry: ，则插件找不到任何要预缓存的文件 如果我提供 entry: '../httpdocs/' 或类似的东西，Webpack 会抱怨它希望文件作为入口点，而不是目录 我看不出有什么办法可以自主告诉 WorkboxPlugin 从哪里开始扫描要预缓存的文件。 WorkboxPlugin 不接受与 Workbox CLI 配合得很好的基于 glob 的参数

我检查过的文档位于this page

【问题讨论】：

你是通过webpack --config=config/webpack.workbox.js生成html和css文件吗？还是文件已经存在？

@AllanChain - 文件已经存在，我将部分回答我发现的更多内容。

【参考方案1】：

我通过googling further 发现该插件的版本 4 允许在匹配+缓存规则之上使用参数 globDirectory 和 globPatterns，其语法与 Webpack 非常相似。

这两个参数是告诉 Workbox 从哪里开始扫描文件以进行预缓存的关键。

Package.json 现在说：

  "devDependencies": 
    "webpack": "^4.0.0",
    "webpack-cli": "^4.0.0",
    "workbox-webpack-plugin": "^4.3.1"
  

插件被调用：

    new WorkboxPlugin.GenerateSW(
      clientsClaim: true,
      skipWaiting: true,
      swDest: 'sw.js',
      globDirectory: './httpdocs',
      globPatterns: ['**/*.html,css'],
      // sourcemap: true,
      exclude: [/\.(?:png|jpg|jpeg|svg)$/], // from precaching
      runtimeCaching: [
         // runtime cache for images
          urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
          handler: 'CacheFirst',
          options: 
            expiration:  maxEntries: 10 ,
            cacheName: 'images',
          ,
        ,
      ],
    ),

Param sourceMap 很遗憾在版本 4 中不可用。

在我看来，插件已经演变成 Webpack 必须主动扫描自己的文件的用法。由于我实际上只想运行 Workbox 任务，我可能应该独立使用 Workbox (workbox-build)。