Skip to content

CodeCoupler Webpack Externals Plugin Caveats

Whenever you use packages from @cc-externals or include your configuration file webpack.externals.js into your package it could lead to problems. That's why using packages from @cc-externals or including recursively configuration files of modules are disabled by default since version 3.

If you are using version 3+ and you do not use the plugin option includeCcExternals: true or the configuration option includeExternals: true and do not include the configuration file in your package then you can safely ignore this page.

We try to explain some of these problems.

Should the configuration files be included in your package?

If you include your configuration file in your package and another developer install your library, use this plugin and configure your library as external he can use the option includeExternals: true to include your configuration into his own.

This could be helpful, but he have to pay attention to the order of the externalized modules (see below).

Should I use @cc-externals Packages as dependecy?

If you install @cc-external packages as dependency of your package and another developer install your library and use this plugin with the plugin option includeCcExternals: true, all externals configuration of your library will be used also in project of the developer using your library.

This could lead to very strict requirements for the user of the library. They maybe will not be able to use their own versions of the external libraries and resources may be loaded into their application that are not needed. Over and beyond the order of the externally loaded libraries can cause additional problems here (see below).

The order and dependencies

Whenever you have to handle included configurations from other packages you have to pay attention to the order within the configuration. All the injections will be done in the order defined in the configuration file. Because Bootstrap depends on jQuery you have to place the module bootstrap after jquery.

If you want to add just an hint on what a module depents you can add just an entry only with the module name:

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

This configuration tells webpack to copy the bootstrap assets but let the module jquery untouched. This is useful if you want to leave the decission up to the user of your library if jquery should be bundled or not (and what assets exactly should be injected). However putting the module jquery in front of bootstrap will ensure that jquery assets will be injected before bootstrap injections.

The order concerns the @cc-external packages. Keep in mind that @cc-external packages will be loaded always first. Ideally, the @cc-external package should have the dependencies defined for itself. However, it is sometimes necessary to adjust the order again.

This was till version 2.1 not configurable. From version 2.2 you can define the modules in your local webpack.externals.js and set the property moveTo. With this property you can move the specified module to the top, the bottom, before another module or after another module.

Here some examples:

1
2
3
4
5
6
7
// Load "@popperjs/core" before "bootstrap"
module.exports = [
  {
    module: "@popperjs/core",
    moveTo: { module: "bootstrap", place: "before" }
  },
];

1
2
3
4
5
6
7
// Load "jquery" as first
module.exports = [
  {
    module: "@popperjs/core",
    moveTo: { module: "bootstrap", place: "before" }
  },
];