Question

73

How to bundle vendor scripts separately and require them as needed with Webpack?

rated 0 times [ 77] [ 4] / answers: 1 / hits: 121372 / 9 Years ago, tue, may 19, 2015, 12:00:00

I'm trying to do something that I believe should be possible, but I really can't understand how to do it just from the webpack documentation.

I am writing a JavaScript library with several modules that may or not depend on each other. On top of that, jQuery is used by all modules and some of them may need jQuery plugins. This library will then be used on several different websites which may require some or all modules.

Defining the dependencies between my modules was very easy, but defining their third-party dependencies seems to be harder then I expected.

What I would like to achieve: for each app I want to have two bundle files one with the necessary third-party dependencies and other with the necessary modules from my library.

Example:
Let's imagine that my library has the following modules:

a (requires: jquery, jquery.plugin1)

b (requires: jquery, a)

c (requires: jquery, jquery.ui, a, b)

d (requires: jquery, jquery.plugin2, a)

And I have an app (see it as a unique entry file) that requires modules a, b and c. Webpack for this case should generate the following files:

vendor bundle: with jquery, jquery.plugin1 and jquery.ui;

website bundle: with modules a, b and c;

In the end, I would prefer to have jQuery as a global so I don't need to require it on every single file (I could require it only on the main file, for example). And jQuery plugins would just extend the $ global in case they are required (it is not a problem if they are available to other modules that don't need them).

Assuming this is possible, what would be an example of a webpack configuration file for this case? I tried several combinations of loaders, externals, and plugins on my configuration file, but I don't really get what they are doing and which ones should I use. Thank you!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nolancampbellc

Add To Favorites

Follow

Total Points: 9

Total Questions: 102

Total Answers: 101

Location: Saint Vincent and the Grenadines

Member since Mon, Jan 16, 2023

1 Year ago

nolancampbellc questions

1 Add optional query parameters to a dynamic path using React Router

Thu, Aug 11, 22, 00:00, 2 Years ago

1 React - Cannot read properties of null (reading useState) error

Fri, May 27, 22, 00:00, 2 Years ago

1 Chrome extension action.onClicked

Thu, Sep 23, 21, 00:00, 3 Years ago

1 How to return string or JSX element in TypeScript React component?

Wed, Jan 13, 21, 00:00, 3 Years ago

1 Cypress iterate through elements in an array

Mon, Nov 23, 20, 00:00, 4 Years ago

View All

answered 9 Years ago hailie · Accepted Answer

in my webpack.config.js (Version 1,2,3) file, I have

function isExternal(module) {

  var context = module.context;



  if (typeof context !== 'string') {

    return false;

  }



  return context.indexOf('node_modules') !== -1;

}

in my plugins array

plugins: [

  new CommonsChunkPlugin({

    name: 'vendors',

    minChunks: function(module) {

      return isExternal(module);

    }

  }),

  // Other plugins

]

Now I have a file that only adds 3rd party libs to one file as required.

If you want get more granular where you separate your vendors and entry point files:

plugins: [

  new CommonsChunkPlugin({

    name: 'common',

    minChunks: function(module, count) {

      return !isExternal(module) && count >= 2; // adjustable

    }

  }),

  new CommonsChunkPlugin({

    name: 'vendors',

    chunks: ['common'],

    // or if you have an key value object for your entries

    // chunks: Object.keys(entry).concat('common')

    minChunks: function(module) {

      return isExternal(module);

    }

  })

]

Note that the order of the plugins matters a lot.

Also, this is going to change in version 4. When that's official, I update this answer.

Update: indexOf search change for windows users