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

Question

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

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

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.

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',
          },
        },
      ],
    }),
  ],
};

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

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

My webDependencies in package.json are the following:

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

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.

The basic problem I see is how to specify the entry point for the pre-caching:

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

The documentation I have examined is on this page

Are you generating html and css files via webpack --config=config/webpack.workbox.js? Or the files are already there? — Allan Chain
– Allan Chain, Commented Mar 28, 2021 at 3:58
@AllanChain - Files are already there, I am putting a partial answer with some more things I found. — Marco Faustinelli
– Marco Faustinelli, Commented Mar 29, 2021 at 8:05

Marco Faustinelli · Accepted Answer · 2021-03-29 16:14:31Z

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.

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

Package.json now says:

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

and the plugin is invoked with:

    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 was unfortunately not available in version 4.

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).

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related