mkdir library
cd library
npm init -y

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

// 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;
}

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

export default {math,string}

npm install webpack webpack-cli --save

const path = require("path");

module.exports={
  mode:"production",
  entry:"./src/index.js",
  output:{
    path:path.resolve(__dirname,"dist"),
    filename:"library.js",
    library:"library",// 在全局变量中增加一个library变量
    libraryTarget:"umd"
  }
}

npm run build

// es6方式
import library from "library"

// commonjs方式
const library=require("library")

// AMD方式
require(["library"],function(){})

// script标签引入
<script src="/UploadFiles/2021-04-02/library.js">

在dist文件夹里创建一个index.html，用script引入之前打包生成的library.js。浏览器打开index.html,在控制台中输入library,会得到如下所示的结果：



一个简单的库便打包生成了。


注解：webpack中libraryTarget配置项可以设为umd,表示采用umd规范，如果设置为this,表示在this下挂载了一个library变量。更多用法可参考webpack官网。
引入别的库用法


假设需要引入lodash.安装lodash


npm install lodash --save


修改之前创建的string.js


import _ from "lodash";

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




运行打包命令，发现打包出来的库体积变大了，因为我们引入了lodash,导致包变大。怎么办呢？修改webpack配置文件。

增加一个externals配置项：


const path =require("path");

module.exports={
  mode:"production",
  entry:"./src/index.js",
  externals:["lodash"],// 配置不打包文件
  output:{
    path:path.resolve(__dirname,"dist"),
    filename:"library.js",
    library:"library",
    libraryTarget:"umd"
  }
}




之后打包就会发现库的体积又变小了。
以上就是一个简单打包库的过程，打包完成后，就可以使用npm相关命令将库发布到npm仓库，发布成功后，就可以让别的小伙伴使用了。当然在实际情况中，打包一个库的话，需要做的还有很多，比如tree-shaking,优化方面的东西，我也正在逐渐学习中！
参考资料


webpack output libraryTarget

webpack external
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。