本文详细讲解如何使用Webpack将JavaScript代码打包为可复用的库。内容涵盖项目初始化、入口文件配置、UMD规范输出设置，以及如何通过externals处理外部依赖以减小体积。最后介绍打包后的多种引入方式及发布到npm仓库的流程，帮助开发者构建高质量的开源组件。
Webpack打包库概述
在开发完一个JavaScript库后，如何将其打包并提供给他人使用？如果对此流程不熟悉，请继续阅读以下步骤。
项目初始化与配置
初始化库项目
mkdir library
cd library
npm init -y
执行上述初始化步骤后，会生成一个包含package.json的library文件夹。接下来需要对package.json进行简单修改，使其符合库项目的标准结构。
{
"name": "library",
"version": "1.0.0",
"description": "",
"main": "./dist/library.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "rocky",
"license": "MIT"
}
创建基础源文件
在根目录下新建src文件夹，并在其中创建math.js和string.js两个源文件。这些文件的具体内容如下所示：
// 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;
}
继续创建入口文件index.js
import * as math from "./math";
import * as string from "./string";
export default {math,string}
Webpack配置与打包执行
安装Webpack相关依赖
npm install webpack webpack-cli --save在安装依赖的同时，需要创建webpack配置文件webpack.config.js。具体的配置代码如下：
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构建完成后，根目录下会生成一个dist文件夹，其中包含打包好的library.js文件。
库的使用与外部依赖处理
如何正确使用打包后的库？
如果其他开发者想要使用这个打包后的library.js，通常有以下几种引入方式：
// es6方式
import library from "library"
// commonjs方式
const library=require("library")
// AMD方式
require(["library"],function(){})
// script标签引入
<script src="library.js"></script>
在dist文件夹中创建一个index.html，通过script标签引入之前打包生成的library.js。在浏览器中打开该HTML文件，并在控制台输入library变量，即可看到如下结果：
至此，一个简单的库打包流程便已完成。
注解：在webpack配置中，libraryTarget选项可以设置为umd，这表示采用UMD（Universal Module Definition）规范。如果设置为this，则表示在全局this对象下挂载了一个名为library的变量。更多关于配置用法的细节，可参考webpack官方文档。
处理外部库的引入
假设需要在库中引入lodash。首先安装lodash依赖。
npm install lodash --save修改之前创建的string.js文件，以使用lodash的功能。
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"
}
}
重新打包后，会发现库的体积又变小了，因为lodash被排除在打包范围之外。
发布与总结
以上就是一个简单库的打包全过程。打包完成后，可以使用npm相关命令将库发布到npm仓库。发布成功后，其他开发者即可通过npm安装并使用该库。当然，在实际生产环境中，打包一个库还需要考虑tree-shaking、代码优化等多方面因素，这也是我目前正在深入学习的内容。
参考资料
webpack output libraryTarget webpack external
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。