CODEWITHSUNDEEP
javascriptreactjswebpack
Keith Yong
Keith Yong

Reputation: 1494

webpack keeps bundling react with each of the multiple entry points

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

Upvotes: 3

Views: 2784

Answers (1)

khagesh
khagesh

Reputation: 948

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'
    }
}

Upvotes: 2

Related Questions