Skip to content

CodeCoupler Webpack Externals Plugin Configuration Reference

You have to define each module that should be handled as external in a file named webpack.externals.js in your root project folder. An absolute minimum file content would be:

1
module.exports = [];

As you can see an array will be defined here. Each item in this array is an object which define an external module. The available options for each entry are:

  • module: The name of the module (corresponds to the package name).
  • alias: Optional. The module name you can use in your import and require statements instead of the module name.
  • global: Optional. The global variable name to access the library provided by the node module.
  • entries: Optional. String or array of strings. Name of files with the extension .js, .cjs 2 or .css to copy from the modules folder to the dist folder and inject links to them into your HTML files.
  • copy: Optional. String or array of strings. Globs to copy from the modules folder to the dist folder. This can be used to copy assets like fonts.
  • includeExternals: If true the webpack.externals.js of the module will be read and merged (default is false 3).
  • moveTo: 1 This have to be a string top or bottom or an object { module: String, place: "before" or "after"}. See below.

Walkthrough Example

Here is an example to define jQuery as an external library:

1
2
3
4
5
6
7
module.exports = [
  {
    module: "jquery",
    global: "jQuery",
    entries: "dist/jquery.min.js",
  },
];

This configuration will:

  1. Exclude the module jquery from the build
  2. Define the global variable jQuery as the source for this library
  3. Copy the file dist/jquery.min.js from the node_modules folder of jQuery to a subdirectory of your dist folder named vendor/jquery-X.X.X/dist/jquery.min.js (the current version will be read from the current installed package)
  4. Copy the corresponding source map (if exists of course) dist/jquery.min.js.map also to the destination folder
  5. Inject a link like <script src="vendor/jquery/dist/jquery.min.js"> to your HTML files processed by the html-webpack-plugin

Now we extend the example by adding the Bootstrap module into the configuration:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
module.exports = [
  {
    module: "jquery",
    global: "jQuery",
    entries: "dist/jquery.min.js",
  },
  {
    module: "bootstrap",
    entries: ["dist/css/bootstrap.min.css", "dist/js/bootstrap.bundle.min.js"],
  },
];

As you can see, the key global is not necessary and entries can be a single string or an array of strings. All entries must end with .js, .cjs 2 or .css. All other exetensions will be ignored.

Last but not least we add the module of Font Awesome to the configuration:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
module.exports = [
  {
    module: "jquery",
    global: "jQuery",
    entries: "dist/jquery.min.js",
  },
  {
    module: "bootstrap",
    entries: ["dist/css/bootstrap.min.css", "dist/js/bootstrap.bundle.min.js"],
  },
  {
    module: "@fortawesome/fontawesome-free",
    entries: "css/all.min.css",
    copy: ["webfonts/"],
  },
];

Here you see the key copy in action. This can be a string or an array of strings. All the globs defined here will be just copied to the destination folder but not injected anywhere. Here you can define single files or folders.

  1. The option moveTo is available from version 2.2.0 ↩

  2. The extension .cjs is valid from version 2.2.1 ↩↩

  3. The default value was true in version 2 and below ↩