Incompatibility with compression-webpack-plugin in webpack 5
See original GitHub issueLibrary Affected: workbox-webpack-plugin
Browser & Platform:
## System:
- OS: Linux 4.15 Linux Mint 19.1 (Tessa)
## Binaries:
- Node: 10.16.0 - /usr/local/bin/node
- Yarn: 1.22.5 - /usr/bin/yarn
- npm: 6.9.0 - /usr/local/bin/npm
BUG: Compression happened before __WB_MANIFEST injection
We use the InjectManifest module. After migrating to WebPack version 5, we noticed that the generated service-worker.js file is compressed by workbox-webpack-plugin before the injection of self.WB__MANIFETS happens. We guess that in the previous version, this file was delivered to this plugin after the injection phase, but in the current version, it is delivered after the file creation phase and before the injection, hence the compressed file Is incomplete.
webpack plugins
{
plugins: [
new WorkboxPlugin.InjectManifest({
swSrc: './src/setup/sw.js',
swDest: 'service-worker.js',
exclude: [/\.(gz|br)$/],
}),
new CompressionPlugin({
algorithm: 'gzip',
minRatio: 0.8,
test: /\.(js|css|html|svg)$/,
})
]
}
package.json
{
"webpack": "^5.4.0",
"compression-webpack-plugin": "^6.1.0",
"workbox-webpack-plugin": "^6.0.0-alpha.3",
}
Issue Analytics
- State:
- Created 3 years ago
- Reactions:3
- Comments:8 (4 by maintainers)
Top Results From Across the Web
CompressionWebpackPlugin | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...
Read more >Use latest terser-webpack-plugin with Webpack5
Hi here is how i resolved the Terserof Webpack 5. Before Webpack 5: minimizer: [ new TerserPlugin({ terserOptions: { mangle: { compress: {} ......
Read more >terser-webpack-plugin - npm
terser-webpack-plugin. TypeScript icon, indicating that this package has built-in type declarations · Readme · Code Beta · 5 Dependencies · 5,720 ...
Read more >Migrating to Webpack 5 at smallcase - Medium
HexRGBA plugin: As we have removed postcss-hexrgba due to its incompatibility with postcss8 and it not being actively maintained, currently ...
Read more >compression-webpack-plugin: Versions - Openbase
default value of the filename option is '[path].gz'; use processAssets hook for webpack@5 compatibility, it can create incompatibility with plugins that do ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

This should be fixed by upgrading to
compression-webpack-pluginv6.1.1.Thanks for pointing this out.
After investigating a bit, changing this line in the
compression-webpack-plugin’s source fromcompiler.hooks.compilation.taptocompiler.hooks.thisCompilation.tapseems to resolve the issue, without having to change any of the ordering of the stages.When the compression plugin hooks into
compilationinstead ofthisCompilation, I see that it’s compression logic runs twice—once for the child compilation created byInjectManifest(which results in the compression happening prior to the manifest injection), and then again following the manifest injection (which I think is a no-op, since thatswDestfile was already compressed). If I switch it tothisCompilation, then the compression only happens once, after the manifest injection has taken place.I’m going to open an issue with the
compression-webpack-pluginfolks to investigate further, and see if switching tothisCompilationis the right approach for them to take.