Webpack: Set an alias to vendor dependencies and add vendor chunk

[Restuta]

Want to discuss this before opening a PR, since I am not sure my vision is aligned with the philosophy of the project.

In short, setting 'react' and 'react-dom' as webpack's resolve:alias can visibly improve dev-rebuild time since it will be using pre-built dependencies.

1. This can de done by setting an alias to pre-built react and react-dom in dev config + alias to .min version in prod.

2. (optional) Define a vendor chunk and specify react and react-dom there also.

I guess, only first option improves build times, not sure of the built impact of the other one, but having two default chunks may teach beginners one of the common approaches, since I assume that a lot of learning will be done by reverse engineering webpack's config after eject. And by setting a standard for managing pre-compiled dependencies, beginners may be able to avoid long-term frustration with slow rebuilds that, subjectively, tend to add up really fast. (it seems ember-cli is taking this approach by default, but their philosophy is different)

Also am aware that there is DllPlugin approach, but not sure if there are any drawbacks for maintainers long-term and it may not be as easy to gasp by beginners as in mentioned above scenario.

[gaearon]

How does this play with npm addons? Like react-addons-perf. Is there a nice way to keep them working with resolve?

Generally I'm very much pro this idea, on both counts. We should use flat bundles if possible, and we should split React code into a separate chunk.

[Restuta]

@gaearon I was able to make it work for my repo and ditched it back while ago, so need some refresh. It's not straightforward, but definitely possible.

[Restuta]

I use this in prod and there is little caveat. Just setting alias won't improve performance, it also should be added to 'noParse' and to make it work with reactDom or Router imports loader has to be used:

    /* tells webpack to skip parsing following libraries
     requires use of "import loader" for certain modules, based on https://github.com/christianalfoni/react-webpack-cookbook/issues/30
    */
    noParse: [ pathToReact, pathToReactDom, pathToReactRouter ], 
    loaders: [{
      test: pathToReactDOM,
      loader: 'imports'
    }, {
      test: pathToReactRouter,
      loader: 'imports'
    }, {....

So I assume same approach is good for addons.

[gaearon]

The problem is that modules like react-addons-perf reach into React, importing things like react/lib/ReactPerf. This will change in the future, but for now this means that we need to somehow alias react/lib/ReactPerf and friends to refer to the correct thing (e.g. React.addons.ReactPerf in UMD addons build).

[Restuta]

@gaearon I will take a look and do it as part of the upcoming PR.

[gaearon]

We will likely do this as part of #210 whenever that effort is revived.