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 doimport $ 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:
1 2 |
|
And you are ready to start!
Example 2: (With own configuration) Bootstrap + Font Awesome + jQuery + animate.css
Install the packages:
1 2 3 4 |
|
Put this in webpack.externals.js
:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
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 |
|
Install your package:
1 |
|
Put this in webpack.externals.js
:
1 2 3 4 5 6 7 8 |
|
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: