workbox-webpack-plugin does not update the revision version of the CSS file, generated by the extractTextWebpackPlugin.extract(...) method

1.1k views Asked by At

I'm using Angular (custom Webpack build procedure) together with the Workbox v.3.2.0 with workbox-webpack-plugin v.3.2.0 (InjectManifest plugin) for the precaching purposes and have difficulties with revisioning of the style.css file that is generated by the extract-text-webpack-plugin.

If I change the appropriate CSS files, Webpack generates updated style.css file, but its revision is not changed in the precache manifest.

As a result, I end up with the file that is not updated in the service worker cache.

Here are the related parts of the Webpack configuration (full config is too big):

{
  entry: {
    'polyfills': './src/polyfills.ts',
    'main': AOT ? './src/main.browser.aot.ts' : './src/main.browser.ts',
    'style': './src/main.scss'
  },
  resolve: {
    extensions: ['.ts', '.js', 'json', '.scss', '.html'],
    modules: [helpers.root('src'), helpers.root('node_modules')]
  }, 
  module: {
    rules: [
      ...
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract(['css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap']),
        exclude: [helpers.root('src', 'styles')]
      },
      ...
    ]
  },
  plugins: [
    ...
    new ExtractTextPlugin("[name].css"),
    new InjectManifest({
      swSrc: './service-worker.js',
      include: [
        /\.html$/,
        /\.js$/,
        /\.css$/,
        /\.ico$/,
        /\.json$/,
        /\.png/,
        /\.svg$/,
        /\.gif$/,
        /\.woff$/,
        /\.ttf$/,
        /\/workbox.*\/.*$/,
        /css.*\.css$/,
        /fonts.*\.(svg|eot|ttf|woff)$/,
        /i18n.*\.json$/,
        /img.*\.(svg|png|gif|jpeg|jpg)$/,
      ],
      exclude: [
        /poc\/.*$/,
        /service-worker.js$/,
        /icons-sprite/,
      ],
      importWorkboxFrom: 'local',
    }),
    ...
  ]
}

Please, note, that I can't use somethig like new ExtractTextPlugin("[name].[contenthash].css") due to some issues with caching the outdated version of the index.html referencing files from the previous releases (not existing anymore). That's why we use anti-cache URL params instead of embedding the revision in the file name.

For any other Webpack-generated file the revision is updated without any issues (even for the assets that do not have revision embedded into the filename)

Could anyone please help me out here? Thanks :)

0

There are 0 answers