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 normally

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 modify your HTML files to load the external libraries from a folder 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.

And some more feature

Switch from self-hosted external files to CDN-Version with just one configuration option.
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.

If you are a library author and you make your code available to others:

Include your configuration file in your package. An other developer can install your library, install this plugin and configure your library as external. All externals configurations of your library will be merged into the configuration of the developer using your library.
Install @cc-external packages as dependency of your package. An other developer can install your library and install this plugin. All externals configuration of your library will be used also in project of the developer using your library.

Examples

Example 1: (The fast way) Bootstrap + jQuery

Install the packages:

npm i @cc-external/bootstrap
npm i @cc-external/jquery

And you are ready to start!

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

Install the packages:

npm i bootstrap
npm i @fortawesome/fontawesome-free
npm i jquery
npm i animate.css

Put this in webpack.externals.js:

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 3: (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:

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: