Skip to content

CodeCoupler Webpack Dynamic Imports

Every supported file type (Modules, HTML Files, Images etc.) can be imported in two ways. You can bundle them into the resulting JavaScript file, or keep them in seperate files and load them dynamically if needed. The second method keeps your bundled JavaScript file smaller, but it needs an additional configuration on the part of the user of your library.

You can use the for example 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);
});

Or this example to load a part of your library separately (here for example 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 basename 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 separated files will be saved in a subdirectory of the dist folder. The name of this subfolder is by default parts. You can change this name in bundle.chunkSubfolder the (see Configuration Reference). Or you can decide to set webChunkName to another path like shown above: webpackChunkName: "../locales/[request]".

Please note how to get the content of the HTML file or the default export of a module by reading the property .default.

If you deploy your library the end user will place the files of course wherever he wants. Therefore your library has to know from 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 camel case (removing dashes, underscores, dots and tilde) and prefixed by pathTo. Please note the trailing slash that has to be defined.

In case that your library will be externalized with the plugin @codecoupler/cc-webpack-externals-plugin you can use the following statement:

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