CODEWITHSUNDEEP
webpackworkboxworkbox-webpack-plugin
Marco Faustinelli
Marco Faustinelli

Reputation: 4206

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

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:

The documentation I have examined is on this page

Upvotes: 0

Views: 2602

Answers (1)

Marco Faustinelli
Marco Faustinelli

Reputation: 4206

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

Upvotes: 1

Related Questions