Webpack ProvidePlugin vs externals?

by

It’s both possible: You can include libraries with a <script> (i. e. to use a library from a CDN) or include them into the generated bundle.

If you load it via <script> tag, you can use the externals option to allow to write require(...) in your modules.

Example with library from CDN:

<script src="https://code.jquery.com/jquery-git2.min.js"></script>

// the artifial module "jquery" exports the global var "jQuery"
externals: { jquery: "jQuery" }

// inside any module
var $ = require("jquery");

Example with library included in bundle:

copy `jquery-git2.min.js` to your local filesystem

// make "jquery" resolve to your local copy of the library
// i. e. through the resolve.alias option
resolve: { alias: { jquery: "/path/to/jquery-git2.min.js" } }

// inside any module
var $ = require("jquery");

The ProvidePlugin can map modules to (free) variables. So you could define: “Every time I use the (free) variable xyz inside a module you (webpack) should set xyz to require("abc").”

Example without ProvidePlugin:

// You need to require underscore before you can use it
var _ = require("underscore");
_.size(...);

Example with ProvidePlugin:

plugins: [
  new webpack.ProvidePlugin({
    "_": "underscore"
  }) 
]

// If you use "_", underscore is automatically required
_.size(...)

Summary:

  • Library from CDN: Use <script> tag and externals option
  • Library from filesystem: Include the library in the bundle.
    (Maybe modify resolve options to find the library)
  • externals: Make global vars available as module
  • ProvidePlugin: Make modules available as free variables inside modules

More Related Contents:

  1. Managing jQuery plugin dependency in webpack
  2. Backbone js .listenTo vs .on
  3. Relation between CommonJS, AMD and RequireJS?
  4. Loading Backbone and Underscore using RequireJS
  5. How to load bootstrapped models in Backbone.js while using AMD (require.js)
  6. Backbone, not “this.el” wrapping
  7. Requirejs why and when to use shim config
  8. How do I trigger the success callback on a model.save()?
  9. Backbone.js event after view.render() is finished
  10. How to disable the warning ‘define’ is not defined using JSHint and RequireJS
  11. Backbone: Refresh the current route
  12. Backbone.js – change not triggering while the name change
  13. Proper way of doing view mixins in Backbone
  14. React-router with BrowserRouter / browserHistory doesn’t work on refresh
  15. Dynamic require in RequireJS, getting “Module name has not been loaded yet for context” error?
  16. webpack dynamic module loader by require
  17. How to use if statements in underscore.js templates?
  18. Finding JavaScript memory leaks with Chrome
  19. Remove console.logs with Webpack & Uglify
  20. How to build minified and uncompressed bundle with webpack?
  21. Webpack for back-end?
  22. Webpack bundles my files in the wrong order (CommonsChunkPlugin)
  23. Uncaught TypeError: fs.readFileSync is not a function
  24. “You may need an additional loader to handle the result of these loaders.”
  25. Delete multiple records using REST
  26. Avoiding relative paths in Angular CLI
  27. How to minimize the size of webpack’s bundle?
  28. Rules vs Loaders in Webpack – What’s the Difference?
  29. What does this javascript syntax mean ? (0, _parseKey2.default)(something) [duplicate]
  30. Modules vs. Namespaces: What is the correct way to organize a large typescript project?

Leave a Comment