A couple of days ago I decided to learn how to write a simple javascript library. I wanted to make a javascript library with a couple of function in it which could be used by anyone just like jquery.

I decided to use webpack for bundling. I got webpack set up but when I embedded my bundled script in my code I could not use any of the functions that I wanted to make available in library.

<script src="myLibrary.js"></script>
<script type="text/javascript">
 /* 
 using any of my library functions here gave me reference error.  
 */
</script>

I knew I was trying to do what other libraries like Redux, jquery etc do. But I did not understand how they did it. So I dug deeper into webpack to understand how to do that.

I have created a small project for the demonstration of how I did it. The github repo can be found at

I created a src directory in which all of my source code is present. index.js is the entry file for my project.

• src
  • index.js
  • capitalize.js
  • unique.js
  • distinctString.js

webpack.config.js

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),  
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    library: '$',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js'],
    modules: [path.resolve(__dirname, 'src')],
  },
  mode: 'development',
  devtool: 'sourceMap',
};

In webpack config there are two important properties in the output for bundling a javascript library.

• library: '$'
• libraryTarget: 'umd'

The library is the name of the variable, the code can be accessed as. For example jquery is available as $, just like that. Any function can be accessed like $.name_of_method and the libraryTarget is the library will be exposed. I am using babel-loader for code transpilation with webpack. The bundled file is put into dist directory after running build script.

package.json

{
  "name": "webpack-js-library",
  "jest": {
    "roots": [
      "test/"
    ]
  },
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "build": "webpack",
    "test": "jest"
  },
  "homepage": "https://github.com/vyasriday/webpack-js-library#readme",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "babel-eslint": "^10.0.2",
    "babel-loader": "^8.0.6",
    "eslint": "^6.1.0",
    "jest": "^24.9.0",
    "webpack": "^4.39.2",
  }
}

In package.json there is one important property main. The main property of a package.json is a direction to the entry point to the module that the package.json is describing. Here I want to it to point to the bundled file which is the compiled code for the library.

I am also using jest for a basic test setup. It is good to have tests for a library.

src/index.js

import capitalize from './capitalize';
import unique from './unique';
import longestDistinctSubstring from './distinctString';

export { capitalize, unique, longestDistinctSubstring };

It is important tha you must export whatever you want to expose in your library. Here I am exposing three functions in the library. While bundling, webpack knows that it is supposed to put these functions on library.

Now I can easily access my library like -

<script src="dist/index.js"></script>
<script type="text/javascript">
  console.log($.capitalize('hridayesh'))
</script>

That's how you can set up webpack to write a javascript library.