时间戳

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

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

问题描述

我已经使用 Workbox CLI 成功构建了服务人员代码。

现在我希望让 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"
}

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

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

我检查过的文档在这个页面上

标签： webpackworkboxworkbox-webpack-plugin

解决方案

我通过谷歌进一步搜索发现插件的版本 4 允许在匹配+缓存规则之上使用与 Webpack 非常相似的语法的参数globDirectory和。globPatterns

这两个参数是告诉 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',
          },
        },
      ],
    }),

不幸的是， ParamsourceMap在版本 4 中不可用。

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

推荐阅读