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

Question

我已经成功地使用 Workbox CLI 构建服务工作者代码。

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

我的站点 90% 是静态的，其静态文件（html 和 css）位于 httpdocs/ 目录树中。在同一个目录中，我希望 Workbox 创建所有服务工作者代码。

我的 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"
}

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

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

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

我检查过的文档在 this page

Answer 1

我发现该插件的第 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)。

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

Using Webpack to just build service worker code with Workbox plugin -> cannot specify entry directory for pre-caching

webpack

workbox

workbox-webpack-plugin