[Webpack] 打包生成的文件模块类型

1. 最终js文件

webpack+babel可以将多个ES6 module打包成一个js文件。
默认情况下，这个js文件的功能是向一个名为Library的变量赋值。

var Library = xxx;

我们可以通过配置webpack，让最终的js文件具有不同的表现形式。

2. output.libraryTarget

它可以有以下几种取值：（默认值为var
（1）var，对一个变量赋值var Library = xxx
（2）this，设置this的Library属性，var Library = xxx
（3）commonjs，设置exports的Library属性，exports["Library"] = xxx
（4）commonjs2，设置module.exports = xxx
（5）amd，导出为AMD格式
（6）umd，导出为AMD，CommonJS2，以及全局对象的一个属性（后面进行解释

3. umd示例

3.1 配置

我们先配置webpack.config.js文件中的libraryTarget为umd，

...

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

3.2 导出

webpack必须指定编译的入口文件，
从这个文件开始，把它所依赖的模块编译打包成一个最终文件，
一般在webpack.config.js文件中，配置entry即可。

假设入口文件为index.js，打包后的最终文件为target.js，
我们需要在入口文件中，一般要将对象通过默认和非默认的方式各导出一次。

// index.js
const v = 1;

export default v;    // 保证默认导入“import v”可用
export { v };     // 保证“window.v”可用

3.3 使用方式

（1）ES5中直接使用target.js
假如用户想直接在浏览器中使用该模块，
它可以通过<script src="target.js"></script>加载js，
然后在随后的<script>文件中，使用window对象获取target.js导出的内容。

// export { v }; 保证ES5可以从全局对象的属性中获取v
var v = window.v;

（2）ES6中引用target.js
假如用户开发环境有一套webpack+babel体系，
可以编译自己的入口文件以及相关的依赖，
那么就可以直接import这个target.js文件。

// export default v; 保证ES6可以默认导入v
import v from 'target.js';

// 当然非默认导出也是可用的
// import { v } from 'target.js'; 

（3）CommonJS方式

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

注意这里，
require('target.js')的结果并不是v，而是一个{ default: 1, v: 1 }对象。

（4）AMD方式（略

---

参考

webpack - libraryTarget
AMD
CommonJS