Skip to content

CodeCoupler Webpack Externals Plugin

What is this

Let's start with an example: You are developing a application, bundled with Webpack, that requires jQuery and Bootstrap. The core library of your application should not contain jQuery or Bootstrap. These libraries should be loaded separately. We also assume that the HTML files will be created or bundled with the html-webpack-plugin.

What you have to do normaly

You start of course with installing the modules with npm i jquery and npm i bootstrap. In your code you use then something like var $ = require('jquery'); or import $ from 'jquery' or even require('bootstrap');.

After that you add these modules into the externals configuration of webpack, so they will not get bundled with your library.

Then you have somehow copy the libraries into the destination directory of your bundle.

Then you modify your HTML files to load the external libraries from that directory or from a CDN.

Last but not least you have to write into your documentation what libraries are needed to use your library and how to include them.

What you have to do with this plugin

With this plugin you can just install these modules with npm i some_module and define these modules in a simple configuration file. The most of the other steps will be executed automatically.

It is even more easier if needed

Furthermore you can skip even the modification of the configuration file. Under the NPM namespace @cc-external are packages available that will set the configuration automatically. For example instead installing jQuery with npm i jquery you can just simple type npm i @cc-external/jquery and everything is done. You can use jquery and it will be automatically setup as external library.

Warning

It is not always useful to use the packages from @cc-externals. In particular, these should not be used when developing libraries, as they create unwanted dependencies. In addition, these packages are not updated regularly, so they contain outdated versions.

!! That's why this feature is disabled by default since version 3 !!

However, it is very useful to look at the webpack.cc-externals.config file from these packages and adopt the configuration.

And some more feature

  1. Switch from self-hosted external files to CDN-Version with just one configuration option.

  2. You can set an alias to the module that will be externalized, so you can instead import $ from jquery you could do import $ from whatever. This is also useful if you want to modify an existing library, but use the origin module name.

Examples

Example 1: (With own configuration) Bootstrap + Font Awesome + jQuery + animate.css

Install the packages:

1
2
3
4
npm i bootstrap
npm i @fortawesome/fontawesome-free
npm i jquery
npm i animate.css

Put this in webpack.externals.js:

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

Example 2: (Modified Bootstrap) Bootstrap + Font Awesome + jQuery + animate.css

Clone, modify and build jQuery under your own name like my-jquery. Now you want to use this modified version in an other project.

Remove the origin jQuery:

1
npm remove jquery

Install your package:

1
npm i my-jquery

Put this in webpack.externals.js:

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

And you do not have to change the import statements. import $ from "jquery" will work and use your modified library.

Thanks goes to

Built on top of: