介绍 mkdir 图书馆
cd 图书馆
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 添加(a, b) {
return 才能;a + b;
}
export function - (a, b) {
return 才能,a - b;
}
export function 乘(a, b) {
return 才能;a * b;
}
export function 部门(a, b) {
return 才能;a/b;
} //, string.js
export function 加入(a, b) {
return 才能;+“,“+ b;
} import *, as math 得到“。/math";
import *, as string 得到“。/string";
export default {数学、字符串} npm install webpack webpack-cli ——保存 const path =,要求(“path");
module.exports={
模式:“production"才能,
条目才能:“。/src/index.js"
输出:{才能
,,,路径:path.resolve (__dirname,“dist"),
,,,文件名:“library.js"
,,,图书馆:“library",//,在全局变量中增加一个图书馆变量
,,,libraryTarget:“umd"
,,}
} npm run 构建 //, es6方式
import library 得到“library"//,commonjs方式
const 图书馆=要求(“library")//,AMD的方式
要求(“library",函数(){})//,脚本标签引入
& lt; script src=https://www.yisu.com/zixun/" library.js "> import _ 得到“lodash";
export function 加入(a, b) {//才能,return a +“,“+ b;
return 才能;_.join ([a, b],“,“);
} const path =要求(“path");
module.exports={
模式:“production"才能,
条目才能:“。/src/index.js"
外部:才能(“lodash")//,配置不打包文件
输出:{才能
,,,路径:path.resolve (__dirname,“dist"),
,,,文件名:“library.js"
,,,图书馆:“library"
,,,libraryTarget:“umd"
,,}
}
这篇文章给大家分享的是有关如何使用webpack打包一个库库的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强>初始化库
经过以上步骤后会生成一个图书馆文件夹,里面包含一个包。json文件。然后简单修改为如下所示:
<强>简单创建几个文件
在根目录下新建src文件夹,新建一个math.js和字符串。js。相关文件内容如下:
继续新建一个索引。js
<强>简单安装webpack依赖
安装的同时,可以创建webpack配置文件webpack.config。js,如下配置:
安装成功后,执行打包命令
之后会在根目录下生成一个dist文件夹,里面包含一个library.js。
<>强如何使用呢?
如果别人要使用这个打包后的图书馆。js的话,可能会有如下几种方式:
在dist文件夹里创建一个index . html,用脚本引入之前打包生成的library.js。浏览器打开index . html,在控制台中输入图书馆,会得到如下所示的结果:
npm install lodash ——保存
修改之前创建的字符串。js
运行打包命令,发现打包出来的库体积变大了,因为我们引入了lodash,导致包变大。怎么办呢?修改webpack配置文件。
增加一个外部配置项:
之后打包就会发现库的体积又变小了。
感谢各位的阅读!关于“如何使用webpack打包一个库库”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
