Add option to DependencyExtractionWebpackPlugin that allows to only run the plugin on certain entrypoints

[fabiankaegy]

What problem does this address?

The issue that I am running into again and again ist that the DependencyExtractionWebpackPlugin applies to all entrypoints. Which means that when you use something like lodash or any of the WordPress dependencies on the frontend for example this means than the entirety of lodash is enqueued from WordPress Core. Instead I would love to get the benefits from treeshaking and also have the ability to controll the version of scritpts in these other entries.

What is your proposed solution?

The solution I'm thinking about is to either add an option to the configuration object that allows you to provide the names of the entrypoints it should be allowed to run on. Otherwise maybe a functoin that can be overridden that gets passed the entry so developers can write their own conditional.

[gziolo]

There is also another possibility since webpack supports multiple configuration types:
https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations

It's actually what I'm proposing for Gutenberg to split configurations for blocks and packages. In your case, you could have one config for the frontend that has special requirements and another config for everything else.

It would be great to avoid adding more conditional features in DependencyExtractionWebpackPlugin if possible 😄

[fabiankaegy]

@gziolo I started looking into it a bit and it is totally possible that I missed something but from my understanding webpack handles externals per webpack instance, not on an entrypoint basis. So there isn't even a conditional we could introduce here... 😂

But it would be great to have tools like wp-scrips make it easier to have the multiple configurations :)

[gziolo]

started looking into it a bit and it is totally possible that I missed something but from my understanding webpack handles externals per webpack instance, not on an entrypoint basis

Yes, you could in theory create a config per entry point if that is what you want to achieve. So you webpack config would looke like:

modules.exports = [
    configForEntry1,
    configForEntry2,
    configForEntry3,
    // ...
    configForEntryN,
];

I don't know if it is technically possible to scope those plugins in such configuration, but it would definitely would be useful 😄

There is also another issue opened #25188 where discuss how we could support multiple blocks in one project. Depending on how it evolves, a more flexible webpack config would be useful.

Is there anything actionable here or can we close this issue for now?

[fabiankaegy]

Thanks for your thoughts here :) and yeah I went down the route of multiple webpack instances like you show in your code example.

I don't think here is anything actionable we can do here right now so agreed and closing (y)