webpack keeps bundling react with each of the multiple entry points

Question

I'm learning webpack and I'm having trouble making it not combine each of these entry points with the React.js source code. I've been following the code of this writeup but to no avail. This is my webpack.config.js:

var webpack = require('webpack');
var config = require('./config');

module.exports = {
    entry: {
        CommentThreadApp: ['./client/CommentThreadApp.jsx'],
        PostsApp: ['./client/PostsApp.jsx'],
        SubpyFiller: ['./client/SubpyFiller.jsx'],
        vendors: ['react']
    },
    output: {
        path: './build',
        publicPath: 'http://localhost:9090/assets/',
        filename: '[name].bundle.js'
    },
    plugin: [
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.bundle.js')
    ],
    module: {
        loaders: [
            { test: /\.jsx$/, loader: 'jsx-loader' }
        ]
    },
    devServer: {
        port: config.webpackServerPort
    }
};

And this is the output of webpack command:

Hash: 289469a6ec0215c9fad9
Version: webpack 1.8.5
Time: 1438ms
                     Asset    Size  Chunks             Chunk Names
     SubpyFiller.bundle.js  635 kB       0  [emitted]  SubpyFiller
        PostsApp.bundle.js  646 kB       1  [emitted]  PostsApp
CommentThreadApp.bundle.js  658 kB       2  [emitted]  CommentThreadApp
         vendors.bundle.js  633 kB       3  [emitted]  vendors
   [0] multi CommentThreadApp 28 bytes {2} [built]
   [0] multi PostsApp 28 bytes {1} [built]
   [0] multi vendors 28 bytes {3} [built]
   [0] multi SubpyFiller 28 bytes {0} [built]
   [5] ./config.js 214 bytes {1} [built]
   [6] ./client/helper-functions.js 1.81 kB {1} {2} [built]
    + 164 hidden modules

These files are normally around 20kb but combine that with the React.js source code and each of them become 620kb. Ideally I want vendors.bundle.js to be 600kb+ with React and other modules, and every other bundle around 30kb with just its source code and some stray requires. I'm not sure what I'm doing wrong with my webpack configuration file. My ideal output:

     SubpyFiller.bundle.js  28 kB       0  [emitted]  SubpyFiller
        PostsApp.bundle.js  28 kB       1  [emitted]  PostsApp
CommentThreadApp.bundle.js  28 kB       2  [emitted]  CommentThreadApp
         vendors.bundle.js  633 kB      3  [emitted]  vendors

Out of curiosity, do you have the same problem if you make your app entry points strings (instead of arrays)? (vendors should still be an array) — Michelle Tilley
Nope, removed the square brackets from entry points and nothing changed, though it didn't give me an error for it. — Keith Yong
That's odd... we definitely use this feature to split our bundles. I'd be willing to discuss our webpack config with you but it's largish and a bit complex, feel free to contact me if you want and we can chat. — Michelle Tilley

khagesh khagesh · Accepted Answer · 2015-04-18T21:17:35

I also faced same issue. As per me the best way is to load react.js from CDN. Loading files from CDN has its own advantages (reduce server load, caching, etc.), and keep react as external in webpack.config.js Sample changes that you can do is

In HTML file include it before webpack bundle files

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.min.js"></script>

In webpack.config.js file, add another key to export object

module.exports = {
externals: {
        'react': 'React'
    }
}

webpack keeps bundling react with each of the multiple entry points

1 Answers