学习webpack【第五章-webpack实战配置案例讲解-1】

一、开发一个库的时候怎么进行打包

二、externals 参数

————————————————————

一、开发一个库的时候怎么进行打包

背景：
1.新建math.js, string.js, index.js
2.index引入Math.js和string.js 并将它们导出出去

image.png image.png image.png

library 和 LibraryTarget

libraryTarget的值设为umd（universal）的意思是：不管通过什么方式引用这个库，无论是CommonJS 还是ES module 还是AMD 都可以正常的引用的到。

image.png image.png

除了以上引用的几种方式， 还可以通过script标签去引入，让Library为全局变量来使用这个库

image.png

这时候可以这样设置，让打包之后的代码挂在到全局变量的library上，也可以设置成其他的

image.png

总结：library和libraryTarget 是配合使用的， 如果library的值为root,libraryTarget的值为window， 意思是在window上绑定root。libraryTarget 的值还可以写为：global,window,this. 但一般来说开发一个类库的时候还是设为umd就行了

二、externals 参数

背景

当在string.js中如果引入了lodash

image.png

当用户使用时， 业务代码也需要使用Lodash, 就会造成两次打包

image.png

这时需要externals参数， 意思是当打包库的时候lodash不打包到库的代码里去，而是在业务代码里去进行进行加载

image.png