Skip to content

CodeCoupler Webpack First Steps Library

To deploy a library you must do the following modifications:

Include only relevant files in package

Modify the files property in the package.json to pack only the resulting JavaScript and CSS-Files:

1
2
3
4
5
6
{
  "files": [
    "dist/*.js",
    "dist/*.css",
  ],  
}

Optional and depending on requirements, additional entries must be included:

  • If you have used dynamic imports you have to include the files or the directory in which the files are build. The default directory for dynamic imports would be dist/parts.
  • If you have imported static assets (like images) you must specify the folder or the files.
  • The file LICENSE will always packed if it exists, but maybe you have added an additional author list. In this case you have to add this file manually, like AUTHORS.

Add main entry point of library

You must add a property main into the package.json. Replace library-name.js with the own name of the library which is by default the package name defined in the property name (without any namespace prefix).

1
2
3
{
  "main": "dist/library-name.js"
}

Disable hash values in bundle filename

You must disable the hashvalues that will be appended to your bundle files. Set these properties to false in the webpack.cc-config.js:

1
2
3
4
5
6
module.exports = {
  bundle: {
    jsNameHashed: false,
    cssNameHashed: false
  }
};

Disable the Generation of Favicons and Manifest

You should disable the Generation of Favicons and Manifest as this is not needed for a library. To do this set staticParser.favicon to null in the webpack.cc-config.js:

1
2
3
4
5
module.exports = {
  staticParser: {
    favicon: null
  },
};

Optional: Define you own global variable name

If you want you use your own library global variable you can set this in the webpack.cc-config.js. This variable allows library users to access the exported functions of the library. Otherwiese cc-webpack will try to create automatically a camel-case name from your library name (the name without any namespace prefix, removing dashes, underscores, dots and tilde):

1
2
3
4
5
module.exports = {
  bundle: {
    libraryName: "yourOwnName"
  }
};

Add main export to the index.js

The file src/index.js should contain only all the exports you want to offer to the user of your library. If you want to provide many exports which are splitted into many files the file yould look like this:

1
2
3
export { default as YourFunction1 } from "./path/to/function1.js";
export { default as YourFunction2 } from "./path/to/function2.js";
export { default as YourFunction3 } from "./path/to/function3.js";

Build and access your library

Now you can build with npm run build && npm pack and deploy the resulting .tar.gz file.

Accessing your library in browser environment

Your library will be accesible from a global variable named as your package name from the package.json converted into camel case or like defined in webpack.cc-config.js.

1
2
3
4
5
6
<link href="your-library.css" rel="stylesheet" type="text/css" />
<script src="your-library.js" type="text/javascript"></script>
<script>
  YourLibrary.anyExportedEntityOfYourLibrary();
  let something = YourLibrary.anyExportedEntityOfYourLibrary();
</script>

Remark: If you are using multiple entrypoints the name is defined in the property names of the object entry (like YourLibrary and YourLibrary_Extension).

Accessing your library in module environment

You library can be installed with npm i your-library-name if you have published it or with npm i your-library-name.tgz with the local archive generated with npm pack. The exported methods can be imported as follows 1:

1
import { anyExportedEntityOfYourLibrary } from "your-library-name";

  1. Up to version 3.3.0, the library had to be externalized when it was imported. Otherwise, importing and bundling in a separate application led to an error. From version 3.3.1 this is not necessery anymore. If you do not externalize the library it will be bundled correctly. ↩