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.
-
If you include your configuration file in your package a developer using your library and this plugin just have to configure your library as external. All externals configurations of your library will be merged into the configuration of the developer using your library.
-
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.
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: