如何使用webpack打包一个库library的方法步骤
日常我们开发了一个库之后，如何打包之后提供给别人使用呢？如果你不清楚，就继续看吧！！！
初始化库
mkdirlibrary cdlibrary npminit-y
经过以上步骤后会生成一个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
exportfunctionadd(a,b){
returna+b;
}
exportfunctionminus(a,b){
returna-b;
}
exportfunctionmultiply(a,b){
returna*b;
}
exportfunctiondivision(a,b){
returna/b;
}
//string.js
exportfunctionjoin(a,b){
returna+""+b;
}
继续新建一个index.js
import*asmathfrom"./math";
import*asstringfrom"./string";
exportdefault{math,string}
简单安装webpack依赖
npminstallwebpackwebpack-cli--save
安装的同时，可以创建webpack配置文件webpack.config.js，如下配置：
constpath=require("path");
module.exports={
mode:"production",
entry:"./src/index.js",
output:{
path:path.resolve(__dirname,"dist"),
filename:"library.js",
library:"library",//在全局变量中增加一个library变量
libraryTarget:"umd"
}
}
安装成功后，执行打包命令
npmrunbuild
之后会在根目录下生成一个dist文件夹，里面包含一个library.js。
如何使用呢？
如果别人要使用这个打包后的library.js的话，可能会有如下几种方式：
//es6方式
importlibraryfrom"library"
//commonjs方式
constlibrary=require("library")
//AMD方式
require(["library"],function(){})
//script标签引入
在dist文件夹里创建一个index.html，用script引入之前打包生成的library.js。浏览器打开index.html,在控制台中输入library,会得到如下所示的结果：
一个简单的库便打包生成了。
注解：webpack中libraryTarget配置项可以设为umd,表示采用umd规范，如果设置为this,表示在this下挂载了一个library变量。更多用法可参考webpack官网。
引入别的库用法
假设需要引入lodash.安装lodash
npminstalllodash--save
修改之前创建的string.js
import_from"lodash";
exportfunctionjoin(a,b){
//returna+""+b;
return_.join([a,b],"");
}
运行打包命令，发现打包出来的库体积变大了，因为我们引入了lodash,导致包变大。怎么办呢？修改webpack配置文件。
增加一个externals配置项：
constpath=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,优化方面的东西，我也正在逐渐学习中！
参考资料
webpackoutputlibraryTarget
webpackexternal
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。