29.webpack——library与libraryTarget的用法/如何打包一个库文件

【重学webpack系列——webpack5.0】

1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。
从第16节开始，专攻webpack原理和高级API，只有深入原理和高级API，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。
可以点击上方专栏订阅哦。

以下是本节正文：

---

commonjs与commonjs2的区别

// commonjs
exports.add = function(a, b){
    return a + b;
}
// commonjs2
module.exports = {
    add(a, b){
        return a + b;
    }
}

library与libraryTarget

• library为导出库的名称
• libraryTarget为导出结果的形式
  • var
  • commonjs
  • commonjs2
  • this
  • window
  • global
  • umd

上面var的模式，在webpack中就会编译成：

---

(上面最后一条注释请忽略)

如果libraryTarget是commonjs的话，webpack中就会编译成：

**特别注意：**这个图是修改过了，请自行查看编译后的内容，exports.calculator = exports;这是会有问题的，原因是：webpack返回的是module.exports，而不是exports，所以，如果光给exports赋值的话，module.exports还是为初始值，即{}，那么引入的时候还是{} —— 这一点也是libraryTarget为commonjs时，会导致的问题！

举个例子：

// a.js
exports = {age: 10}

// Index.js
const obj = require('./a.js')
console.log(obj) // {}

---

(上面最后一条注释请忽略)

如果libraryTarget是commonjs2的话，webpack中就会编译成：

(上面最后一条注释请忽略)

注意：webpack返回的是module.exports，而不是exports，所以，如果光给exports赋值的话，module.exports还是为初始值，即{}，那么引入的时候还是{} —— 这一点也是libraryTarget为commonjs时，会导致的问题！

举个例子：

// a.js
exports = {age: 10}

// Index.js
const obj = require('./a.js')
console.log(obj) // {}

---

(上面最后一条注释请忽略)

导出的内容会挂载到this上，而这个this=module.exports=exports，所以this就是我们导出的内容

---

(上面最后一条注释请忽略)

window代表导出的内容挂载到window上

---

(上面最后一条注释请忽略)

global代表导出的内容挂载到global上

---

(上面最后一条注释请忽略)

umd的话，会根据导出的数据类型，去走不同的逻辑。也就是同时支持commonjs、commonjs2、amd、全局变量等。比如moment这个库用的就是umd

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object') // 如果exports是对象并且commonjs2中的module是对象
    module.exports = factory();// commonjs2才有modle
  else if(typeof define === 'function' && define.amd)
    define([], factory);// 如果define是函数并且define.amd存在，也就是说是amd
  else if(typeof exports === 'object')
    exports['MyLibrary'] = factory(); // 如果是对象
  else
    root['MyLibrary'] = factory(); // 全局变量
})(typeof self !== 'undefined' ? self : this, function() {
  return _entry_return_;
});

---

另外：cmd、amd已经退出历史舞台了，淘汰了