webpack打包时通过library和libraryTarget设置资源输出方式

output.library和output.libraryTarget属性可能大家都会比较陌生，因为一般如果只在项目中使用 webpack 不需要关注这两个属性，但是如果是开发类库，那么这两个属性就是必须了解的。

类库的几种方式：

<script src="demo.js"></script>
<script>demo();</script>

define(['demo'], function(demo) {
  demo();
});

const demo = require('demo');

demo();

import demo from 'demo';

demo();

output.library
支持输入string或者object(从 webpack 3.1.0 版本开始支持; 限于 libraryTarget: “umd” 时使用)类型的值。

output.library的值被如何使用会根据output.libraryTarget的取值不同而不同。而默认output.libraryTarget的取值是var，如果如下配置：

output: {
  library: "myDemo"
}

如果在 HTML 页面中使用script标签引入打包结果文件，那么变量myDemo对应的值将会是入口文件(entry file)的返回值。

output.libraryTarget

指定模块暴露的方式

支持输入string类型的值。默认值：var

此配置的作用是控制 webpack 打包的内容是如何暴露的。请注意这个选项有些需要和output.library所绑定的值一起产生作用。

暴露一个变量  【var, assign】assign不会定义变量

通过对象属性暴露  【this, window, global, common】library定义属性

模块定义系统  【commonjs2, amd umd】 library不起作用

output.libraryTarget一共支持的值：

1. var - 默认值
2. assign
3. this
4. window
5. global
6. commonjs
7. commonjs2
8. amd
9. umd
10. jsonp

参考：https://blog.csdn.net/frank_yll/article/details/78992778