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

by

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

More Related Contents:

  1. What should I do to use this webpacked JS library? [closed]
  2. Passing environment-dependent variables in webpack
  3. “You may need an appropriate loader to handle this file type” with Webpack and Babel
  4. Calling webpacked code from outside (HTML script tag)
  5. Resolving require paths with webpack
  6. Angular 2: import external js file into component
  7. Static image src in Vue.js template
  8. What does “publicPath” in Webpack do?
  9. Using require(‘…’) with a variable vs. using a string in webpack
  10. where is create-react-app webpack config and files?
  11. I am getting an “Invalid Host header” message when connecting to webpack-dev-server remotely
  12. Rails: Webpacker 4.2 can’t find application in /app/public/packs/manifest.json heroku
  13. Error: Missing class properties transform
  14. webpack –watch isn’t compiling changed files
  15. Webpack Express Cannot Resolve Module ‘fs’, Request Dependency is Expression
  16. Module not found: Error: Can’t resolve vue, path not correct
  17. In the `import` syntax of ES6, how is a module evaluated exactly?
  18. Babel 7 – ReferenceError: regeneratorRuntime is not defined
  19. Path aliases for imports in WebStorm
  20. HtmlWebpackPlugin injects relative path files which breaks when loading non-root website paths
  21. Node JS and Webpack Unexpected token
  22. Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module ‘babel-preset-react’
  23. Conflict: Multiple assets emit to the same filename
  24. Output an ES module using webpack
  25. Angular: 7.2.1 ES6 class ReferenceError : Cannot access ‘X’ before initialization
  26. Exclude module from webpack minification
  27. React JS Server side issue – window not found
  28. Why is webpack –watch not updating when specific files are updated
  29. How to bind img src to data in Vue
  30. Load static JSON file in Webpack

Leave a Comment