CODEWITHSUNDEEP
webpack
Doug
Doug

Reputation: 15523

Setup webpack with multiple entry points, common and vendor and chunks

I have a webpack configuration where I have 2 entry points (a.js and b.js), and would like to split up my shared code into 2 additional files: common and vendor.

I am using the Explicit Vendor Chunk example

a.js and b.js should be small - only the modules themselves, and not any shared code. I would like the "runtime" to be split up between application runtime (common.js) and vendor runtime (vendor.js)

When I load a.html, I can load vendor.js, common.js and a.js scripts

module.exports = {
  context: __dirname,
  devtool: 'inline-source-map',
  entry: {
    a: './src/a.js',
    b: './src/b.js',
    vendor: [
      'react',
      'react-dom',
      'react-router'
    ]
  },
  output: {
    path: path.join(__dirname, './build'),
    filename: '[name].js'
  },
  plugins: [
    new CommonsChunkPlugin({
    name: "vendor",
    minChunks: Infinity,
    })
  ]
}

This creates a vendor chunk but I would also like to create a common app chunk between a.js and b.js.

How do i create a common application chunk as well using webpack?

Upvotes: 1

Views: 2465

Answers (1)

Andrew Smith
Andrew Smith

Reputation: 1454

I ran into this problem as well a couple months ago, and finally figured out the solution. Here's my webpack config, assuming two entry points app.en.js and app.es.js that have some locale-specific code and then import our app which has our React components, Redux reducers, etc.

entry: {
  'app.en': './frontend/src/app.en.js',
  'app.es': './frontend/src/app.es.js',
},

/**
 * The order matters here a lot!
 */
plugins: [
  /**
   * The `common` chunk will catch code shared between `app.en.js` and `app.es.js`, 
   * e.g. the React components used in your app.
   */
  new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
  }),

  /**
   * Catches all your vendor files, assuming they're in `node_modules`. You can 
   * change the logic to include other vendor folders as well, as shown 
   * below (we have one simply called 'vendor').
   */
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: function (module) {
      // this assumes your vendor imports exist in the node_modules directory
      return module.context && (module.context.indexOf('node_modules') !== -1)
    }
  }),
],

Also note that I do not include the actual app (in our case, application.js) in our entry points.

It's also important to note that I did not specify a 'vendor' entry point as is so often shown in examples. That completely did not work for me.

Upvotes: 1

Related Questions