Webpack nested namespace library sample

This is a sample for making a library with nested namespace in Webpack.

Setting up the environment

Install the dependencies

npm install

Creating a Bundle of library

npx webpack

Directory structure

.
├── dist/                   # The folder in which webpack packages the built version of library.
├── src/                    # The folder in which all of library source.
│   ├── entry.js            # Entry point. Output module of the library.
│   ├── sub1/               # Namespace of myLib.sub1
│   │   ├── Bar.js          # Bar class module
│   │   └── Foo.js          # Foo class module
│   └── sub2/               # Namespace of myLib.sub2
│       ├── Baz.js          # Baz class module
│       └── Qux.js          # Qux class module
├── example/                # Example of working library
├── webpack.config.js       # Configuration file that webpack uses to build library
└── package.json            # Configuration file for Project metadata, dependencies and build scripts

Work Example

Creating a Bundle of example

cd ./example
../node_modules/webpack/bin/webpack.js

Open ./example/index.html in the browser and check with the console

Example source code

import * as lib from 'lib';

print(lib.sub1.Foo.name());
print(lib.sub1.Bar.name());
print(lib.sub2.Baz.name());
print(lib.sub2.Qux.name());

function print(str) {
  const p = document.createElement('p');
  p.textContent = str;
  document.body.appendChild(p);
}