Create-react-app: Update to webpack 4 and integrate automatic vendor code splitting

[gaearon]

https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
https://github.com/webpack/webpack/pull/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

[viankakrisna]

https://github.com/webpack/webpack/releases/tag/v4.0.0-beta.0 has been released 🎉

[Ayc0]

Gotta go fast 😁

[andriijas]

Early work: https://github.com/andriijas/create-react-app/tree/webpack4

Current status (updated 2018/02/22)

• [x] Implement new 'mode' in config development for dev, production for prod.
• [x] InterpolateHtmlPlugin upgraded to webpack 4 plugin system using new event in upcoming html-webpack-plugin
• [x] allChunks on ExtractTextPlugin
• [x] PR submitted: danethurber/webpack-manifest-plugin#118
• [x] PR submitted: goldhand/sw-precache-webpack-plugin#138
• [x] ExtractTextPlugin v4.0.0-alpha.0 released
• [x] thread-loader 1.1.4 released with webpack 4 support

Blockers

• [ ] html-webpack-plugin - approaching alpha release: webpack-contrib/html-webpack-plugin#3
• [ ] webpack-manifest-plugin PR merged and pre release
• [ ] sw-precache-webpack-plugin PR merged and pre release

Resources:
https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202

[andriijas]

Repo: https://github.com/andriijas/create-react-app/tree/webpack4

Current status - updated 2018/02/22

Successful builds with webpack 4!

Note: precache plugin, manifest plugin directly from git branches of pending PRs

Note: Using html-webpack-plugin directly from git, maintainer of repo of grid/on vacation

How to get it running:
clone repo, checkout branch, yarn
cd node_modules/sw-precache-webpack-plugin && npm i && npm run prepare

yarn start/yarn run build

Call for help

Callbacks seems to have been removed from new webpack plugin API, anyone who know how to handle that in migration of plugins? Thinking of ModuleScopePlugin/InterpolateHtmlPlugin and WatchMissingNodeModulesPlugin

Im going to become the "webpack go-to guy" at work 😭

[brandonburkett]

Will this allow us to have a separate vendor bundle once it drops for for react-scripts?

[andriijas]

I think it will make most sense to first bring in webpack 4 and then look at how to bundle vendor scripts. @Ayc0 have experience with it and can hopefully help out once we get webpack 4 in.

[int64ago]

@Ayc0 Hi, Webpack 4.0.0 is here! https://github.com/webpack/webpack/releases/tag/v4.0.0