背景
一般前端在使用webpack进行项目开发的时候（即使用webpack打包项目），基本不会使用output中的output.library和libraryTarget这两个属性，但是如果我们类库的时候（即使用webpack打包js库），那么这两个属性是必须要知道的。
我们在前端开发项目的时候，对模块化已经习以为常，我们引入一个包可以通过script、require、import三种方式引入。但是我们需要明白，我们之所以可以使用这三种引用方式，全依靠这个引用包的“导出方式”。
因此记住：我们的导出方式决定了我们可以使用的引用方式
www.taodudu.cc/news/show-1…
前置知识：
1.模块化方案
2.
webpack中的output.library
library译为库，图书馆，在webpack中这个属性用来命名模块的名称
而output.libraryTarget则是设置打包后的js脚本的导出方式，这些导出方式就是我们了解的模块化规范：commonJS、AMD\CMD\UMD，而这个值就是用来从这几种模块化规范中选出一种或者兼容几种。
可选值
- var 通过
var {Library} = xxx;的方式导出模块，即定义（隐性）全局变量 - this 通过
this[{Library}] = xxx;的方式导出模块，其中this一般指向window，也是定义全局变量 - commonjs 这个选项可以使打包后的JS包使用在common环境中。即在引用的时候需要
require('文件名.js')[方法名]才能引用到xxx。因为require('xxx.js')引入的是一个exports对象，然后通过访问exports对象的一个属性来拿到导出指。(因为指定exports属性的方式导出模块，例如exports[方法名] = xxx;)
// 使用commonjs打包方式后的导出方式：放在exports对象的某个属性中
exports["largeNumber"] = _entry_return_;
// 引入&使用方式
const exports = require("largeNumber")
exports.doSomething();
- commonjs2 通过指定
module.exports的方式导出模块，例如module.exports = xxx;，引用的时候直接使用require('xxx.js')即可引用到xxx。
module.exports = _entry_return_;
// 引入&使用方式
const largeNumber = require("largeNumber"); // 直接使用
largeNumber();
- umd：这个选项会尝试把库暴露给当前使用的模块定义系统，这使其和CommonJS、AMD兼容或者暴露为全局变量
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else {
var a = factory();
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
}
})(this, function() {
return _entry_return_;
});
- amd：这个选项会把库作为 AMD 模块导出。
define("largeNumber", [], function() {
return _entry_return_;
});
// 使用方式
require(['largeNumber'], function(largeNumber) {
// Do something with the library...
largeNumber();
});
注意：commonjs 表示纯 CommonJs，即导出的任何东西都只是在exports对象的其中一个属性，commonjs2 在 CommonJs 的基础上增加了 module.exports，即可以直接导出一个东西，不需要通过exports对象中去拿
