Update to webpack 4 and integrate automatic vendor code splitting

[gaearon]

https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
webpack/webpack#6341

Since we're going to keep 2.x in alpha stage for at least a month or two as we wait for Babel 7 to get stable, we might as well jump straight to webpack 4.

@Ayc0 Seeing that you worked on #3145 and feel passionate about solving this, would you like to work on this?

[Ayc0]

I'm gonna see what I can do about it

[gaearon]

Thank you!

[andriijas]

@Ayc0 lets talk about it here instead. Im thinking lets try to get webpack 4 and new split chunk plugin working first, then we can look at loading some libs from cdn.

Anyway we are semi-blocked from using webpack 4 alpha until this is resolved:

jantimon/html-webpack-plugin#816
WIP PR: jantimon/html-webpack-plugin#823 (also chunks related)

[andriijas]

Initial stab. I think i got the overlay building with webpack4 (it has less plugins and loaders so i thought it was a good starting place) https://github.com/andriijas/create-react-app/tree/webpack4

the template wont boot, even if i remove all plugins there seems to be some can not read context of undefined error on the entrypoints.

[Ayc0]

I'm waiting for webpack 4 to be released, or at least a stable alpha/beta

For the specs, I want to add a vendors.json file that allows users to add multiple vendors in different chunks with this syntax:

["moduleA", "moduleB"]

resulting in vendors.xxx.js

[
  ["moduleA", "moduleB"],
  ["moduleC", "moduleD"]
]

resulting in vendor0.xxx.js and vendor1.xxx.js

And

{
  "vendor_a": ["moduleA", "moduleB"],
  "vendor_b": ["moduleC", "moduleD"]
}

resulting in vendor_a.xxx.js and vendor_b.xxx.js

[Ayc0]

I don't think that the CDN should be included in this PR because we can just use the external field of webpack and add the link to the cdn in the index.html

[Ayc0]

And, as we also want to improve the long term caching, we need to use the name plugin (I think it changed to in webpack 4, not sure...)

[Ayc0]

and also, I want to activate the optimization.runtimeChunk

[Timer]

@Ayc0 I read this was the last version before stable, so you should be able to start playing with it