What is the architecture needed to achieve steps 8—Optimizing common code.

[chemoish]

It does not seem like a bundle can be loaded lazily or otherwise (So I am not sure how you would load Profile/Feed).

How does one achieve loading multiple entry points over some router?

// webpack.config.js

var webpack = require('webpack');

var commonsPlugin =
  new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
  entry: {
    Profile: './profile.js', // go to profile page—load Profile
    Feed: './feed.js' // go to feed page—load Feed
  },
  output: {
    path: 'build',
    filename: '[name].js' // Template based on keys in entry above
  },
  plugins: [commonsPlugin]
};

[chemoish]

Maybe someone from the future will needs this. So here we are.

---

Not exactly sure if this is optimal, but it seems to be working.

Define multiple entry points.

entry: {
    app: './src/app.js',

    pageHome: './src/components/home/Home.js',
    pageSetting: './src/components/setting/Setting.js'
}

Define the common chunk plugin to look at your end points.

plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js', [
        'app',
        'pageHome',
        'pageSetting'
    ], 2)
]

Utilize react-router and react-router-proxy-loader… (Not sure if this works with bundle-loader alone).

https://github.com/rackt/react-router/blob/0.13.x/docs/guides/overview.md https://github.com/odysseyscience/react-router-proxy-loader

<Route path="/" handler={App}>
    <DefaultRoute handler={require('react-router-proxy!./components/home/Home.js')}></DefaultRoute>

    <Route name="home" handler={require('react-router-proxy!./components/home/Home.js')}></Route>
    <Route name="setting" path="settings" handler={require('react-router-proxy!./components/setting/Setting.js')}></Route>
</Route>

Success?

1. Pages will be loaded with only the dependencies they require.
2. Any common related code will be extracted and placed into common.js.
3. Seems to work with react-hot, babel-loader, file-loader, style-loader, etc.