使用 Webpack 仅通过 Workbox 插件构建 Service Worker 代码 ->无法为预缓存指定入口目录 [英] Using Webpack to just build service worker code with Workbox plugin -> cannot specify entry directory for pre-caching

问题描述

我已经使用 Workbox CLI 成功构建了 Service Worker 代码.

I have been successfully building service workers code with Workbox CLI.

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

Now I wish to let Webpack run the related plugin and prepare the SW code accordingly.

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

My site is 90% static and its static files (html and css) are inside a httpdocs/ directory tree. In the same directory I wish Workbox to create all the service worker code.

我的 webpack 配置文件很简单:

My webpack config file is simple:

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 任务如下:

The NPM task I am trying to use is the following:

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

我在 package.json 中的 webDependencies 如下:

My webDependencies in package.json are the following:

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

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

The build runs, but the service worker is created without files to pre-cache. This tells me that the WorkboxPlugin did not scan the httpdocs/ directory; I cannot blame it, because I see no place in the config where that information is given to the plugin. On the other hand, the plugin writes the service worker code correctly where I specified.

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

• 如果我向 Webpack 提供 entry: {}，则插件找不到任何要预缓存的文件
• 如果我提供 entry: '../httpdocs/' 或类似的东西，Webpack 会抱怨它想要文件作为入口点，而不是目录
• 我无法自主告诉 WorkboxPlugin 从哪里开始扫描要预缓存的文件.
• WorkboxPlugin 不接受在 Workbox CLI 中运行良好的基于​​ glob 的参数

• If I provide entry: {} to Webpack, then the plugin does not find any file to pre-cache
• If I provide entry: '../httpdocs/' or similar things, Webpack complains that it wants files as entry points, and not dirs
• I see no way to tell autonomously the WorkboxPlugin where to start scanning for files to precache.
• the WorkboxPlugin does not accept the glob-based parameters that worked so good with Workbox CLI

我检查过的文档位于 此页面

推荐答案

我发现于 进一步搜索插件的第 4 版允许参数 globDirectory 和 globPatterns，在匹配+缓存规则之上一种与 Webpack 非常相似的语法.

I discovered by googling further that version 4 of the plugin allows params globDirectory and globPatterns, on top of matching+caching rules with a syntax very similar to Webpack.

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

Those two params are the key to telling Workbox where to start scanning files to pre-cache.

Package.json 现在说:

Package.json now says:

  "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 中不可用.

Param sourceMap was unfortunately not available in version 4.

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

It seems to me that the plugin has evolved into a usage where Webpack must be actively scanning for its own files. Since I actually want to just run the Workbox task, I possibly should be using Workbox standalone (workbox-build).

这篇关于使用 Webpack 仅通过 Workbox 插件构建 Service Worker 代码 ->无法为预缓存指定入口目录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！