levp / wrapper-webpack-plugin

A webpack plugin that wraps output files (chunks) with custom text or code.
91 stars 37 forks source link

Uses deprecated hooks in Webpack 5 #11

Open marcins opened 4 years ago

marcins commented 4 years ago

With Webpack 5 this plugin results in a deprecation warning:

(node:96995) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hook.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
    at /Users/<REDACTED>/node_modules/wrapper-webpack-plugin/wrapper-webpack-plugin.js:40:43

I've fixed this in a bunch of our local plugins in a way that's compatible with Webpack 4 and Webpack 5 (by detecting the presence of the processAssets hook), I'll try and create a PR for that here, just raising the issue as a placeholder in case it takes me longer to get to it!

retorquere commented 3 years ago

Which PR is that? I might apply it myself.

marcins commented 3 years ago

I didn't actually get around to creating a PR for this one. However if it helps, this is the pattern I used that should work for this plugin too:

    doTheWork(compilation) {
      // this is the body of the plugin
   }

    apply(compiler) {
        compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
            // In Webpack 5 we need to use the new processAssets hook to add additional assets
            if (compilation.hooks.processAssets) {
                compilation.hooks.processAssets.tap(
                    {
                        name: PLUGIN_NAME,
                        stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS, 
                    },
                    () => this.doTheWork(compilation),
                );
                return;
            }

            compilation.hooks.optimizeChunkModules.tap(PLUGIN_NAME, () =>
                this.doTheWork(compilation),
            );
        });
    }

Based on the descriptions in https://github.com/webpack/webpack/blob/master/lib/Compilation.js#L3356-L3429 - that should be the correct stage to use - it specifically mentions "banners".

vespakoen commented 3 years ago

@marcins thanks for that!

I was able to get things working with webpack 5 with the following code:

https://github.com/webpack/webpack-sources/issues/92#issuecomment-709601572

Note that I was actually having another issue when using it in combination with terser-webpack-plugin but maybe it's helpful anyways.

NOTE: Expect that I made mistakes, I haven't got much knowledge about webpack-sources / webpack 5 etc.

j0ashm commented 1 year ago

I've proposed a PR to fix this in #22. If any of y'all are particularly good at Webpack, I'd appreciate someone taking a look to make sure all is okay 😄

I've tested it on a few limited cases and want to make sure it works for other expected uses someone can think of.