Webpack 5 about webpack-subresource-integrity

[jscheid]

@LP1994 you're awaiting it eagerly :-)

The 1.5.0 release with Webpack 5 support isn't far off, just waiting for one more review. In the meantime, feel free to point your package.json at the webpack-5 branch and let me know how it goes.

[LP1994]

@LP1994 please could you create a sample repository that shows the problem?

Okay, but we will be able to create a warehouse for your testing later.
Thank you. Your prompt reply.

[jscheid]

@LP1994 please don't comment across multiple tickets about the same issue. I've tested your example with webpack-subresource-integrity 1.5.1, webpack 5.1.3, and html-webpack-plugin 4.5.0 and it works fine here now.

html-webpack-plugin 5.0.0-alpha is currently unsupported. You need to use version 4.

If you can confirm it works with version 4, please let me know.

If you still have problems:

• Make sure your sample repository is updated to use html-webpack-plugin version 4, not 5
• Commit package-lock.json or yarn.lock to the repository so I can see exactly which versions you're using
• Open a new ticket instead of commenting here or on #131
• Describe your problem as clearly as possible, for example by saying which browser version you're using, what exactly you expect to happen, and what happens instead.

Thank you.

[LP1994]

Webpack 5 is expected to be updated as soon as possible.

[LP1994]

@LP1994 you're awaiting it eagerly :-)

The 1.5.0 release with Webpack 5 support isn't far off, just waiting for one more review. In the meantime, feel free to point your package.json at the webpack-5 branch and let me know how it goes.

Okay, I will, I am a person who is passionate about new things and a big fan of webpack!

[jscheid]

Closed by #130, released in 1.5.0.

[LP1994]

Closed by #130, released in 1.5.0.

Sir, when I load JS using ES6's dynamic import syntax( as: import('../test/Test.esm.js') ), the plug-in does not generate the Sri values correctly.
webpack: 5.1.0!!!
Compiled file:
CompiledFile.zip

There are a few things that I don't understand:
1、Is the code in the following image to remove the script node intentionally? When the dynamically generated script node is loaded, the script node is deleted.

2、"154990" in "s.integrity = o.sriHashes[ 154990]" should be "788760".

3、Why does "154990" always exist when I use ES6's dynamic syntax to import scripts?

[jscheid]

@LP1994 please could you create a sample repository that shows the problem?

[LP1994]

@LP1994 please could you create a sample repository that shows the problem?

Sir, this is a very small code base, I will use the compressed package directly.
I'm sorry. I'll get back to you now.
Test.zip

[LP1994]

@LP1994 please could you create a sample repository that shows the problem?

https://github.com/LP1994/webpack-subresource-integrity-test1.git

[LP1994]

Step 1: npm i
Step 2: npm run test

The results are in the dist folder.

[jscheid]

@LP1994 thanks for putting together the sample repository.

You're using [email protected], which apparently doesn't work with this plugin. Could you use version 4 instead? Let me know if you still have problems with version 4.

@jantimon is this on your radar? Let me know if there's anything I can do to help from my side.

[jantimon]

hey :)

the current alpha is using the new webpack apis to add and delete assets:

https://webpack.js.org/api/compilation-object/#emitasset

Maybe all you have to do is to switch to getAssets or getAsset.

Please let me know if I can be of any help to solve this issue

[jscheid]

@jantimon ah, right, interesting... there's a little bit more to it, but yes it looks like it's mostly a bit of rejiggling.

There's one issue though, it appears that htmlWebpackPluginAlterAssetTags is now called before the afterOptimizeAssets hook. I think this is different from before. Is that easy for you to switch back? I'm using alterAssetTags to add integrity, but that can only be computed correctly after the assets have been optimized.

[jantimon]

I am not sure if this is possible - Webpack 5 disallows adding assets after the compilation.hooks.processAssets hook..

So we have a timing conflict:

compilation.hooks.processAssets is adding all the assets so you have to wait for it but also the html-webpack-plugin is part of it so you can't wait for it..

[jscheid]

Perhaps the HTML files your plugin generates shouldn't be considered "assets" in the Webpack sense after all? What's the reason behind switching to emitAsset?

[jantimon]

The reason is a change in the webpack architecture:

(node:79288) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.

The other reason is that plugins like the compression plugin or workbox generate their assets based on the html-webpack-plugin and expect it to be created as part of the webpack asset generation.

So given that you have now Workbox + Compression + Html + SubresourceIntegrity there would be only one possible timeline:

1. final CSS & JS generation
2. subresourceIntegrity generates the final hashes
3. html generation
4. service worker creation
5. compression

A user of those plugins would really need to understand the webpack asset processing and add the plugins in the perfect order. Otherwise they would not able to work correctly.
I guess that might cause some frustration.

Hopefully the webpack core team can help us out here :)
@sokra is there a better hook I could use for the html-webpack-plugin?

[jscheid]

@jantimon is it maybe just a matter of selecting the right PROCESS_ASSETS_STAGE_, something like PROCESS_ASSETS_STAGE_DEV_TOOLING (which doesn't sound appropriate for your plugin by the name of it, but sounds like it might run after optimization and before e.g. compression.)

[LP1994]

@jantimon is it maybe just a matter of selecting the right PROCESS_ASSETS_STAGE_, something like PROCESS_ASSETS_STAGE_DEV_TOOLING (which doesn't sound appropriate for your plugin by the name of it, but sounds like it might run after optimization and before e.g. compression.)

v1.5.1!!!It's still wrong.

[LP1994]

However, 1.5.0 is still OK, but the Sri of dynamically imported files cannot be generated correctly.

Now, however, none of the Sri values work.

[LP1994]

@LP1994 please don't comment across multiple tickets about the same issue. I've tested your example with webpack-subresource-integrity 1.5.1, webpack 5.1.3, and html-webpack-plugin 4.5.0 and it works fine here now.

html-webpack-plugin 5.0.0-alpha is currently unsupported. You need to use version 4.

If you can confirm it works with version 4, please let me know.

If you still have problems:

• Make sure your sample repository is updated to use html-webpack-plugin version 4, not 5
• Commit package-lock.json or yarn.lock to the repository so I can see exactly which versions you're using
• Open a new ticket instead of commenting here or on #131
• Describe your problem as clearly as possible, for example by saying which browser version you're using, what exactly you expect to happen, and what happens instead.

Thank you.

OK.