Webpack and external libraries

by

According to the Webpack documentation, you can use the externals property on the config object “to specify dependencies for your library that are not resolved by webpack, but become dependencies of the output. This means they are imported from the enviroment while runtime [sic].”

The example on that page illustrates it really well, using jQuery. In a nutshell, you can require jQuery in the normal CommonJS style:

var jQuery = require('jquery');

Then, in your config object, use the externals property to map the jQuery module to the global jQuery variable:

{
    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
    }
}

The resulting module created by Webpack will simply export the existing global variable (I’m leaving out a lot of stuff here for brevity):

{
    1: function(...) {
        module.exports = jQuery;
    }
}

I tried this out, and it works just as described.

More Related Contents:

  1. webpack dynamic module loader by require
  2. Conditional build based on environment using Webpack
  3. In the `import` syntax of ES6, how is a module evaluated exactly?
  4. How to correctly use ES6 “export default” with CommonJS “require”?
  5. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  6. How to copy static files to build directory with Webpack?
  7. React Native: require() with Dynamic String?
  8. ES6 exporting/importing in index file
  9. How do I generate sourcemaps when using babel and webpack?
  10. Load “Vanilla” Javascript Libraries into Node.js
  11. How to handle circular dependencies with RequireJS/AMD?
  12. Arrow Function syntax not working with webpack?
  13. Webpack file-loader outputs [object Module]
  14. Webpack babel 6 ES6 decorators
  15. Importing CSS files in Isomorphic React Components
  16. javascript import from ‘/folder’ with index.js
  17. How to import part of object in ES6 modules
  18. How to check whether a script is running under Node.js?
  19. What are differences between SystemJS and Webpack?
  20. Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser
  21. Webpack: Bundle.js – Uncaught ReferenceError: process is not defined
  22. Webpack 5 – Uncaught ReferenceError: process is not defined
  23. Example of how to load static CSS files from node_modules using webpack?
  24. How to get access to webpack-dev-server from devices in local network?
  25. Configure webpack to allow browser debugging
  26. Webpack 4 migration CommonsChunkPlugin
  27. How to setup TypeScript + Babel + Webpack?
  28. Why is my webpack bundle.js and vendor.bundle.js so incredibly big?
  29. What does this javascript syntax mean ? (0, _parseKey2.default)(something) [duplicate]
  30. How to dynamically import SVG and render it inline

Leave a Comment