13518219792
这篇文章给大家分享的是有关如何使用webpack打包一个库library的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于网站制作、成都网站制作、旌阳网络推广、小程序定制开发、旌阳网络营销、旌阳企业策划、旌阳品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供旌阳建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com
初始化库
mkdir library cd library npm init -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
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依赖
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标签引入
在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"
}
}之后打包就会发现库的体积又变小了。
感谢各位的阅读！关于“如何使用webpack打包一个库library”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
