Creating a JavaScript library with webpack

Webpack is a great tool for bundling JavaScript libraries.

The typical webpack.config.js used by a library looks something like this:

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js',
        libraryTarget: 'commonjs'
    },
    externals: { ... }
};

When bundling a library, is important to consider how it going to be loaded. In Node.js, libraries generally use module.exports in combination with require('...'). This is why libraryTarget is set to commonjs in the file above.

The externals configuration is used to specify the library's peer dependencies.