webpack-plugin takeaways: vue-cli webpack integration

[jeffposnick]

Library Affected:
workbox-webpack-plugin

I'm filing this bug as a reminder to address a few takeaways after integrating the 3.0.0-alpha.2 version of new WorkboxPlugin() (without any config) into a vue init webpack-scaffolded project.

The manifest it generates looks like:

self.__precacheManifest = [
  {
    "url": "/static/js/vendor.838a79d42f288249609f.js.map"
  },
  {
    "url": "/static/js/vendor.838a79d42f288249609f.js"
  },
  {
    "url": "/static/js/manifest.b7d5cdcec7f9d47fa7ac.js.map"
  },
  {
    "url": "/static/js/manifest.b7d5cdcec7f9d47fa7ac.js"
  },
  {
    "url": "/static/js/app.f3ffa612454f0757334d.js.map"
  },
  {
    "url": "/static/js/app.f3ffa612454f0757334d.js"
  },
  {
    "revision": "e8d1748dd5e87a88a36cedc37d531728",
    "url": "/static/css/app.bf9a994c72151daa5e919b0f3ccdc900.css.map"
  },
  {
    "revision": "f3ffa612454f0757334d",
    "url": "/static/css/app.bf9a994c72151daa5e919b0f3ccdc900.css"
  },
  {
    "revision": "ba37e5362c2060a35dd4625a0093eb3d",
    "url": "/index.html"
  }
];

There are a few takeaways to follow up on. Some of which may already be tracked independently.

• We need to omit the .map files by default.
• We need to omit the webpack-specific manifest.[hash].js by default.
• We need to use relative, rather than absolute, URLs. (EDIT: This is due to publicPath being configured as /, and we should continue using publicPath, so there's nothing to change.)
• We need to detect that the CSS file already includes a hash (it's produced via ExtractTextPlugin() being fed into OptimizeCSSPlugin()).

[jeffposnick]

Regarding

We need to detect that the CSS file already includes a hash (it's produced via ExtractTextPlugin() being fed into OptimizeCSSPlugin()).

I'm currently at a loss for how to do this in a generic way. I've asked https://stackoverflow.com/questions/47658134/determining-which-pattern-generated-a-webpack-assets-file-name, and have gently ping'ed @TheLarkInn to see if he has any ideas.

[xiaoiver]

Since I'm using the swSrc, I can control the whole precache manifest list in a more flexible way.
I use the following code to omit the .map and hot-update files used by webpack-hot-middleware in development mode.

workbox.precaching.precacheAndRoute(
    (self.__precacheManifest || [])
        // Exclude .map and hot-update files in development mode.
        .filter(function(entry) {
            return !/((\.map)|(\.hot-update\.js(on)?))$/.test(entry.url);
        })
);

[gauntface]

@jeffposnick can this be closed now?

I'm not fussed about checking if the filename has a hash or not, it's a nice to have something we could alter in the future without a change in behavior.

[jeffposnick]

Yup. And we've got Workbox 3.0.0-beta.0 integrated into the next branch of vue-cli: vuejs/vue-cli#769