Create webpack library from scratch

Today, 27th January 2023, Ukraine is still bravely fighting for democratic values, human rights and peace in whole world. Russians ruthlessly kill all civilians in Ukraine including childs and destroy their cities. We are uniting against Putin’s invasion and violence, in support of the people in Ukraine. You can help by donating to Ukrainian's army.

I will start from minimal example so you can clearly understand the full concept and then will improve configuration for popular use-cases (ES6 transpiling, script-tag, and npm compatibility).

My node & npm versions:

$ node -v
$ npm -v

Create folder:

mkdir p2 && cd p2
npm init

Pressed enter for all questions, any info could be changed later:

About to write to /home/ivan/devforth/p2/package.json:

 "name": "p2",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
 "author": "",
 "license": "ISC"

Install webpack and webpack-cli packages (CLI is used to run build command):

npm i -D webpack
npm install -D webpack-cli
webpack-cli is needed to run build command, previously it was built-in inside of webpack, but one day it started to say the cli moved into a separate package: webpack-cli. So to fix it just follow steps above and install both packages

Open package.json file and check which versions were installed. For me it:

"devDependencies": {

Create file main.js with the next code:

export function p2 (x) {
  return x + 2;

So this library will return a function named p2 which adds 2 to argument. For your needs it can do anything: create new object of a class or return some static object.

Create file webpack.config.js in the same folder


With the next content:

'use strict';
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'build'),  // folder where library will be placed
    filename: 'p2.commonjs2.js',  // filename of the library
    libraryTarget: 'commonjs2',

The libraryTarget option is used to define a way how others will import the library. If you want the library to be used by npm install and import library using import operator, then use commonjs2.

Add build script to package.json scripts:

"scripts": {
    "build""webpack --progress"

Also, change the main entry point in package.json:


Run npm run build

Check output:

npm run build for webpack

Now files will appear in build folder:

$ ls build/

To test library create file test.js and place next:

const { p2 } = require('./build/p2.commonjs2.js');
console.log('p2:', p2)
console.log('p2(1):', p2(1)) 

You should see:

test webpack library

Ivan Borshchov profile picture
Feb 14, 2021
by Ivan Borshchov
Did it help you?
Yes !

Best related