workbox not picking up in-memory files with webpack-dev-server

Question

In our project we are using webpack-dev-server to run our development environment. We are currently transforming the project into a progressive-web-app using workbox.

When we run webpack with NODE_ENV=production everything is working fine, as it first compiles the files, and then the workbox plugin picks them up and adds them to the service-worker.

When we run webpack-dev-server hot, the build fails when running the workbox plugin as it cannot find any files in the dist folder.

The problem seems to be that workbox is not picking up the js and css files that are generated in-memory and seems to need the files on the file system.

module.exports = {
  context: path.resolve(__dirname, 'front'),
  entry: [
    ...preEntries,
    './react/app.js'
  ],
  output: {
    path: path.resolve(__dirname, 'front-dist'),
    filename: `react/app.${git.gitCommitAbbrev}.js`,
    chunkFilename: `react/[id].app.${git.gitCommitAbbrev}.js`,
    publicPath: '/glass/'
  },
  devtool: isProdEnv ? false : 'eval-source-map',
  stats: {
    chunkModules: false
  },
  module: {
    ...
  },
  plugins: [
    new WorkboxPlugin({
      globDirectory: path.resolve(__dirname, 'front-dist'),
      globPatterns: ['**/*.{html,js,css,woff2}'],
      swDest: path.join(path.resolve(__dirname, 'front-dist/sw/'), 'service-worker.js'),
      handleFetch: true,
      clientsClaim: true,
      skipWaiting: true,
    })
  ]
}

Any idea's as to how this should be working

Weatherspoon

have u read developers.google.com/web/tools/workbox/get-started/webpack? – Sing

They claimed to make it work with webpack-dev-server in this merge: github.com/GoogleChrome/workbox/pull/808 But I'm still having the same problem. If there's no build directory in the file system, it just doesn't work :( – Reheat

As you pointed out it's because files are in memory not on disk, I believe this answer can help you here - #41928858 – Recline

Have you found a solution since then? – Ania

Answer 1

Recent releases of workbox-webpack-plugin have support for in-memory filesystems, with coverage in its test suite.

If you're still having troubles with the current release of Workbox, please open an issue on the issue tracker and we can investigate further.

That being said, using a cache-first service worker inside of a hot-reload, local development environment is a puzzling choice, as caching defeats the purpose of seeing updates right away.

Quijano