Anatolii Kolesnyk
Anatolii Kolesnyk

Reputation: 21

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

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

Upvotes: 2

Views: 1128

Answers (0)

Related Questions