Skip to content

CodeCoupler Webpack Dynamic Imports

You can import every supported file type (Modules, HTML Files, Images etc.) in two ways. You can bundle them into the resulting JavaScript file, or keep them in separate files and load them dynamically if needed. The second method keeps your bundled JavaScript file smaller, but requires additional configuration by users of your library.

For example, you can use the following syntax to load an HTML file dynamically:

1
2
3
4
5
6
import(
  /* webpackChunkName: "filename.html" */
  "./path/to/your/filename.html"
).then((htmlText) => {
  console.info(htmlText.default);
});

Here's an example of how to load a part of your library separately (in this case, a language file):

1
2
3
4
5
6
7
let lang = "de";
import(
  /* webpackChunkName: "../locales/[request]" */
  `../locales/${lang}`
).then((language) => {
  console.info(language.default)
});

The name after webChunkName in the "webpack magic comment" will be used as the base name for the separate file. For HTML files, it is advisable to use the same name as the HTML file. For dynamic imports including a variable part it is asvidable to use the placeholder [request].

All separate files will be saved in a subdirectory of the dist folder. The name of this subfolder is parts by default. You can change this name in bundle.chunkSubfolder the (see Configuration Reference). Alternatively, you can decide to set webChunkName to a different path, as shown above: webpackChunkName: "../locales/[request]".

Note how to access the content of an HTML file or the default export of a module by reading the property .default.

When you deploy your library, the end user can place the files wherever he wants. Therefore, your library must know where to load the separated files. The user of the library must define the path to your library as follows:

1
2
3
4
5
<script>
  window.pathToYourLibrary = "path_to_your_library/dist/";
</script>
<link href="your-library.css" rel="stylesheet" type="text/css" />
<script src="your-library.js" type="text/javascript"></script>

The name pathToYourLibrary is defined in bundle.pathVarName (see Configuration Reference). By default, it is the package name from the package.json (without the namespace), converted into camelCase by removing dashes, underscores, dots, and tilde, and prefixed by pathTo. Please note that the trailing slash must be defined.

If your library is externalized with the CodeCoupler Webpack Externals Plugin, you can use the following statement: 1

1
window.pathToYourLibrary = window.externalsPath["your-library"] + "/dist/";

  1. Until version 4.4, the variable name was window.ccExternals. ↩