Externals

externals configuration in webpack provides a way of not including a dependency in the bundle. Instead the created bundle relies on that dependency to be present in the consumers environment.
This typically applies to library developers though application developers can make good use of this feature too.

externals

string regex function array object

Prevent bundling of certain imported packages and instead retrieve these external packages at runtime.

For example, to include jQuery from a CDN instead of bundling it:

index.html

...<script src="https://code.jquery.com/jquery-3.1.0.js"  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="  crossorigin="anonymous"></script>...

webpack.config.js

externals: {  jquery: 'jQuery'}

This leaves any dependant modules unchanged, i.e. the code shown below will still work:

import $ from 'jquery';$('.my-element').animate(...);

T> consumer here is any end user application that includes the library that you have bundled using webpack.

Your bundle which has external dependencies can be used in various module contexts mainly CommonJS, AMD, global and ES2015 modules. The external library may be available in any of the above form but under different variables.

externals supports the following module contexts

• global - An external library can be available as a global variable. The consumer can achieve this by including the external library in a script tag. This is the default setting for externals.
• commonjs - The consumer application may be using a CommonJS module system and hence the external library should be available as a CommonJS module.
• commonjs2 - Similar to the above line but where the export is module.exports.default.
• amd - Similar to the above line but using AMD module system.

externals accepts various syntax and interprets them in different manners.

string

jQuery in the externals indicates that your bundle will need jQuery variable in the global form.

array

externals: {  subtract: ['./math', 'subtract']}

subtract: ['./math', 'subtract'] converts to a parent child construct, where ./math is the parent module and your bundle only requires the subset under subtract variable.

object

externals : {  react: 'react'}// orexternals : {  lodash : {    commonjs: "lodash",    amd: "lodash",    root: "_" // indicates global variable  }}

This syntax is used to describe all the possible ways that an external library can be available. lodash here is available as lodash under AMD and CommonJS module systems but available as _ in a global variable form.

function

It might be useful to define your own function to control the behavior of what you want to externalize from webpack. webpack-node-externals, for example, excludes all modules from the node_modules and provides some options to, for example, whitelist packages.

It basically comes down to this:

externals: [  function(context, request, callback) {    if (/^yourregex$/.test(request)){      return callback(null, 'commonjs ' + request);    }    callback();  }],

The 'commonjs ' + request defines the type of module that needs to be externalized.

regex

?> TODO - I think its overkill to list externals as regex.

For more information on how to use this configuration, please refer to the article on how to author a library.