Add Encore.addCacheGroup() method and depreciate Encore.createSharedEntry()

[Lyrkan]

As discussed in #645 (comment) our Encore.createSharedEntry() hack won't work anymore with Webpack 5.

Since it was mostly something that was added to make the transition from Webpack 3 to Webpack 4 less painful it's probably time to depreciate it and encourage people to use cache groups properly instead.

This PR adds a new Encore.addCacheGroup() method that, as its name implies, simply adds a new cache group to the config:

Encore.addCacheGroup('vendor', {
  test: /[\\/]node_modules[\\/]react/
});

To make it a bit easier in case people want to directly reference things from the node_modules directory I also added a node_modules option which is basically a shorthand that sets the test option:

Encore.addCacheGroup('vendor', {
  node_modules: ['react', 'react-dom']
});

[weaverryan]

Minor stuff. GREAT idea - it's time for the shared entry to go away :).

[weaverryan]

Wow :)

[stof]

should we also include vendors, which is the name in webpack 4 ?

[stof]

should we also warn if you pass this.webpackConfig.sharedCommonsEntryName ?

[Lyrkan]

should we also include vendors, which is the name in webpack 4 ?

Oh, so that's why we previously used vendors in _validateSharedEntryName()!
I couldn't find a reference to it in the doc anymore since the following page already got updated with defaultVendors: https://webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks

I think I'll add it and we'll remove it when we upgrade to Webpack 5.

should we also warn if you pass this.webpackConfig.sharedCommonsEntryName ?

We could but I'm not sure it'll be really useful... people will probably either:

• start a new project and directly use addCacheGroup() since createSharedEntry() throws a deprecation warning
• see the deprecation warning and try to replace their createSharedEntry() calls by addCacheGroup()

Doesn't cost much to add a warning though.

[weaverryan]

Thank you @Lyrkan!

[XWB]

@Lyrkan @weaverryan Can you guys give an example how I should migrate this:

Encore
    .createSharedEntry('app', './assets/js/app.js')
;

To Encore.addCacheGroup()?

The documentation still refers to createSharedEntry.

[Lyrkan]

@XWB If you can, use Encore.splitEntryChunks() as explained here. It will automatically handle common code and split your files accordingly.

This requires reading the generated entrypoints.json file to know which file(s) you need to include into your pages but:

• if you can use the Webpack Encore Bundle that's also done automatically
• if you can't it should still be relatively easy to read it and generate script/link tags based on it

If you can't use splitEntryChunks() that'll depend on what the content of your app.js is:

• if it's only a bunch of vendor imports you can create a cache groupe and list them in the node_modules option (note that it will only add those package to the group, not sub-dependencies)
• if you also have custom code you can use the test option and make it match that files + its dependencies (you can use a function instead of a RegExp is that's easier).

Note that addCacheGroup() does not do much apart from adding cache groups to Webpack with some default options (see the doc here) and shortcuts (well, only one currently: the node_modules option).

[XWB]

Thank you @Lyrkan :)