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
vendors
should still be an array) – Michelle Tilley