Setting Up Webpack For A JavaScript Library
Tags: javascript, webpack, jest, javscriptbundler
Published: 2019-08-17 11:53:38

---
title: Setting Up Webpack For A JavaScript Library
published: true
description: webpack set up for a javscript library

tags: javascript, webpack, jest, javscript-bundler
---

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. 
```html
<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 {% github vyasriday/webpack-js-library %}

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_**
```javascript
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_**
```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**
```javascript
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 - 
```html
<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.