See also:
Article

Creating a JavaScript library with webpack

How to bundle a JavaScript library with webpack?
Directory tree

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.

Last updated on 3/9/2020 by Anton Vasetenkov.