How to package a library with webpack

Time:2021-5-11

After we develop a library, how can we package it and provide it to others? If you don’t know, keep looking!!!

Initialization Library


mkdir library
cd library
npm init -y

After the above steps, a Library folder will be generated, which contains a package. JSON file. Then it is simply modified as follows:


{
 "name": "library",
 "version": "1.0.0",
 "description": "",
 "main": "./dist/library.js",
 "scripts": {
  "build": "webpack"
 },
 "keywords": [],
 "author": "rocky",
 "license": "MIT"
}

Simply create a few files

Create a new SRC folder in the root directory, and create a new math.js and string.js. Relevant documents are as follows:


// math.js
export function add(a,b){
  return a+b;
}

export function minus(a,b){
  return a-b;
}

export function multiply(a,b){
  return a*b;
}

export function division(a,b){
  return a/b;
}


// string.js
export function join(a,b){
  return a+" "+b;
}

Continue to create a new index. JS


import * as math from "./math";
import * as string from "./string";

export default {math,string}

Simple installation of webpack dependencies


npm install webpack webpack-cli --save

At the same time of installation, you can create a webpack configuration file, webpack.config.js, as follows:

const path = require("path");

module.exports={
  mode:"production",
  entry:"./src/index.js",
  output:{
    path:path.resolve(__dirname,"dist"),
    filename:"library.js",
    Library: "library", // add a library variable to the global variable
    libraryTarget:"umd"
  }
}

After the installation is successful, execute the packing command


npm run build

After that, a dist folder will be generated in the root directory, which contains a library. JS.

How to use it?

If others want to use the packaged library.js, there may be the following ways:

//ES6 mode
import library from "library"

//Commonjs mode
const library=require("library")

//Amd mode
require(["library"],function(){})

//Script tag introduction
<script src="library.js"></script>

Create an index.html in the dist folder, and use script to import the library.js generated by previous packaging. Open index.html in the browser and enter library in the console. The result is as follows:

A simple library is packaged and generated.

Note: the librarytarget configuration item in webpack can be set to UMD, which means the UMD specification is adopted. If it is set to this, it means a library variable is mounted under this. For more usage, please refer to webpack website.

Introduce other library usage

Suppose you need to introduce lodash. Install lodash


npm install lodash --save

Modify the string.js created before


import _ from "lodash";

export function join(a,b){
  // return a+" "+b;
  return _.join([a,b]," ");
}

Running the package command, we found that the volume of the package library became larger. Because we introduced lodash, the package became larger. What shall I do? Modify the webpack configuration file.
Add an external configuration item:

const path =require("path");

module.exports={
  mode:"production",
  entry:"./src/index.js",
  Externals: ["lodash"], // configure not to package files
  output:{
    path:path.resolve(__dirname,"dist"),
    filename:"library.js",
    library:"library",
    libraryTarget:"umd"
  }
}

After packaging, you will find that the size of the library is smaller.

The above is a simple process of packaging the library. After packaging, you can use NPM related commands to publish the library to the NPM warehouse. After publishing successfully, you can let other small partners use it. Of course, in the actual situation, if you package a library, you still need to do a lot, such as tree shaking, optimization things, I’m also gradually learning!

reference material

webpack output libraryTarget
webpack external

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.