Webpack common library

创建 Library

webpack 除了打包应用程序外，还支持打包 js 的 library

设计思路

由于是 library，所以与业务的打包逻辑不同，需要考虑到该 lib 支持多种导入方式，以及打包的大小。

目前常见的使用方式有:

// ES2015 模块引入
import Ballon from 'ballon'

// CommonJS 模块引入
var Ballon = require('ballon')

// AMD 模块引入

// script 标签引入
<script src="https://xxx.com/ballon"></script>
<script>
  // ...
  // 全局变量
  ballon.xxx(yyy)
  // ...
</script>

为了让 library 能够在各种用户环境中可用，需要在 output 中添加 library 属性

output: {
    path: config.dist.assetsRoot,
    filename: 'ballon.min.js',
    library: 'ballon',
    libraryTarget: 'umd',
    umdNamedDefine: true
}

library: 'ballon' library 的名称为 ballon

libraryTarget: 'umd' 将你的 library 暴露为所有的模块定义下都可运行的方式。它将在 CommonJS, AMD 环境下运行，或将模块导出到 global 下的变量

umdNamedDefine: true 会对 UMD 的构建过程中的 AMD 模块进行命名

以上配置最终输出为:

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define("ballon", [], factory);
	else if(typeof exports === 'object')
		exports["ballon"] = factory();
	else
		root["ballon"] = factory();
})(this, function() {
  //这个模块会返回你的入口 chunk 所返回的
})

配置 webpack 的 externals

由于 library 的包对大小有严格要求，某些外部的依赖如果不剔除掉会导致 lib 的包过大。所以将这些依赖让使用 library 的用户去控制。这里由于是 Vue 组件库，所以不需要将 Vue 打包进 lib 中。

exports.vue = {
  root: 'Vue',
  commonjs: 'vue',
  commonjs2: 'vue',
  amd: 'vue'
}

需将 webpack 的 externals 配置为 exports.vue。这意味着你的 library 需要一个名为 vue 的依赖，这个依赖在用户的环境中必须存在且可用

这里注意，使用 <script> 标签导入 Vue 时 Vue 导入的变量是 “window.Vue” 而不是 “window.vue”