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 FreeTop 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
Top GitHub Comments
This should be fixed by upgrading to
compression-webpack-plugin
v6.1.1.Thanks for pointing this out.
After investigating a bit, changing this line in the
compression-webpack-plugin
’s source fromcompiler.hooks.compilation.tap
tocompiler.hooks.thisCompilation.tap
seems to resolve the issue, without having to change any of the ordering of the stages.When the compression plugin hooks into
compilation
instead 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 thatswDest
file 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-plugin
folks to investigate further, and see if switching tothisCompilation
is the right approach for them to take.