1. 最終js文件

webpack+babel可以將多個(gè)ES6 module打包成一個(gè)js文件。
默認(rèn)情況下，這個(gè)js文件的功能是向一個(gè)名為Library的變量賦值。

var Library = xxx;

我們可以通過配置webpack，讓最終的js文件具有不同的表現(xiàn)形式。

2. output.libraryTarget

它可以有以下幾種取值：（默認(rèn)值為var
（1）var，對(duì)一個(gè)變量賦值var Library = xxx
（2）this，設(shè)置this的Library屬性，var Library = xxx
（3）commonjs，設(shè)置exports的Library屬性，exports["Library"] = xxx
（4）commonjs2，設(shè)置module.exports = xxx
（5）amd，導(dǎo)出為AMD格式
（6）umd，導(dǎo)出為AMD，CommonJS2，以及全局對(duì)象的一個(gè)屬性（后面進(jìn)行解釋

3. umd示例

3.1 配置

我們先配置webpack.config.js文件中的libraryTarget為umd，

...

module.exports = {
    ...
    output: {
        ...
        libraryTarget: 'umd'
    },
    ...
};

3.2 導(dǎo)出

webpack必須指定編譯的入口文件，
從這個(gè)文件開始，把它所依賴的模塊編譯打包成一個(gè)最終文件，
一般在webpack.config.js文件中，配置entry即可。

假設(shè)入口文件為index.js，打包后的最終文件為target.js，
我們需要在入口文件中，一般要將對(duì)象通過默認(rèn)和非默認(rèn)的方式各導(dǎo)出一次。

// index.js
const v = 1;

export default v;    // 保證默認(rèn)導(dǎo)入“import v”可用
export { v };     // 保證“window.v”可用

3.3 使用方式

（1）ES5中直接使用target.js
假如用戶想直接在瀏覽器中使用該模塊，
它可以通過<script src="target.js"></script>加載js，
然后在隨后的<script>文件中，使用window對(duì)象獲取target.js導(dǎo)出的內(nèi)容。

// export { v }; 保證ES5可以從全局對(duì)象的屬性中獲取v
var v = window.v;

（2）ES6中引用target.js
假如用戶開發(fā)環(huán)境有一套webpack+babel體系，
可以編譯自己的入口文件以及相關(guān)的依賴，
那么就可以直接import這個(gè)target.js文件。

// export default v; 保證ES6可以默認(rèn)導(dǎo)入v
import v from 'target.js';

// 當(dāng)然非默認(rèn)導(dǎo)出也是可用的
// import { v } from 'target.js'; 

（3）CommonJS方式

var result = require('target.js');
// result === { default: 1, v: 1 };

注意這里，
require('target.js')的結(jié)果并不是v，而是一個(gè){ default: 1, v: 1 }對(duì)象。

（4）AMD方式（略

參考

webpack - libraryTarget
AMD
CommonJS