0

In my webpack config I have entry defined as like this -

entry: [
    'webpack-hot-middleware/client',
    './src/app.jsx'
  ],

I had realized that my bundle size getting generated as around 8 mb in size.

So I decided to split the vendor javascript files into separate chunks i.e bundle.vendor.js

I know that I have to use use CommonsChunkPlugin for this and change the entry to something like this 

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

But can't figure out how to change my existing entry configuration for the same which is currently set as

entry: [
    'webpack-hot-middleware/client',
    './src/app.jsx'
  ],
WitVault
  • 23,445
  • 19
  • 103
  • 133
  • commonchunksplugin doesn't really help/work in development mode. bundle size is also mostly irrelevant in development mode. the poorly named and confusing "dllplugin" is useful to extract large resources into a separate pre-built file, in a separate pre-build step, for development purposes – Andy Ray Dec 29 '16 at 00:06

1 Answers1

1

1. You need to tell Webpack about your entry points, and in this case, you can define the vendors entry as an array of dependencies. Like this:

entry: {
   app: path.join(__dirname, 'path/to/app.jsx'), // prefer using absolute paths to avoid problems
   vendors: ['jquery', 'lodash']
}

2. You need to tell Webpack which of your entries should be optimized: Notice that you're passing a second string in the plugin's configuration "names". It's the name of another file that will be generated by Webpack. It will be responsible for telling the browser how to handle dependencies correctly and will be included before your app and vendors script tags.

plugins : [
   new webpack.optimize.CommonsChunkPlugin({
      names: ['vendors', 'manifest']
   })
]

If you need, I have a repo with a working example of this. The CommonsChunk part is in the prod configuration.

Matheus Dal'Pizzol
  • 5,735
  • 3
  • 19
  • 29
  • Where should I put this `'webpack-hot-middleware/client'` – WitVault Dec 27 '16 at 19:33
  • This is another issue. Seems like it was already asked here: http://stackoverflow.com/questions/31844343/how-to-use-webpack-dev-server-multiple-entries-point – Matheus Dal'Pizzol Dec 28 '16 at 17:28
  • 1
    I did following and it worked `entry: { app: [ 'webpack-hot-middleware/client', './src/app.jsx' ], vendor:[ 'lodash' ] }` Any way thanks for help. You can update your answer if you like. – WitVault Dec 29 '16 at 12:22