webpack学习笔记(5)-webpack里面的libraryTarget参数

[sevenCon]

前言

webpack里面的output其中有2个属性, 分别是libraryTarget和library, 是用来打包一个库的时候工作的.

library是导出的库的变量名,而libraryTarget则是导出的变量是赋值到哪一个变量上的, 比如this, global, window,exports等等.

这章主要解决2个问题?

• library和libraryTarget配合使用的打包结果是怎么样的?
• library缺省值的情况下打包结果会有什么变化?

下面会用一个demo的打包情况, 来看看webpack这2个属性的打包结果. 下面是一些基本的配置.

默认的webpack.config.js的配置.

let baseConfig = {
  entry: {
    index: './index.js'
  },
  output: {
    filename: '[name].[chunkhash].js',
    publicPath: '/',
    chunkFilename: '[name].[chunkhash].js',
    library: 'myLib'
  }
};

index.js的入口实例代码

let a = 1;
exports.a = a;

libraryTarget的值有哪些?

以下所有的情况,默认的library:'myLib'

libraryTarget:var(默认值)

默认当前情况下, 打包的入口返回的值, 是var.
以下是打包出来的文件(去掉了其他的内容), 简要的结构.

var myLib = (function(modules) {
  function __webpack_require__(moduleId) {
    return module.exports;
  }
  ... 其他的打包相关内容
  return __webpack_require__((__webpack_require__.s = 0));
})([
  function(module, exports) {
    let a = 1;
    exports.a = a;
  }
]);

这个可以和其他libraryTarget的值类比, 从入口的index.js进入开始打包, 入口的文件index.js的导出的模块, 就是__webpack_require__函数的返回值.
然后把整个入口函数导出的内容, 赋值给变量myLib, 也就是library的值, 这是libraryTarget需要配合library使用的原因.

libraryTarget: amd

打包amd兼容的模块

libraryTarget:umd

libraryTarget:commonjs

libraryTarget:commonjs2

libraryTarget:assign

libraryTarget: 'assign' - 这将产生一个隐含的全局变量，可能会潜在地重新分配到全局中已存在的值（谨慎使用）。

libraryTarget:global

libraryTarget:jsonp

libraryTarget:this

libraryTarget:window

library的缺省值怎么影响打包结果

如果library的值是缺省的

libraryTarget:amd 定义将匿名模块

如果library属性的值是在libraryTarget:amd的匿名模块, 此时加载符合amd模块标准, 加载匿名模块需要用该文件名称进行加载.

define(function() { return /******/ (function(modules) {
    ...
}

libraryTarget: this | global | window | commonjs

以上几种的情况可以何在一起讲, 因为this | global | window | commonjs都是指向一个对象, 这种情况, index.js返回的内容也是挂载在一个对象上, 所以会进行遍历这个对象上的属性, 并赋值到this | global | window | commonjs的对象上.

libraryTarget: commonjs2

commonjs2和commonjs的模块打包是有区别的, nodeJs用的是拓展了commonJs的commonjs2, 和commonJs不同, 增加了module.export, __filename, __dirname等等内置的变量

而libraryTarget: commonjs2在library缺省的时候, 打包并没有什么不同, 因为module.exports = xxx 并不需要library的值. 所以这个时候library值缺省也是可以的.

libraryTarget: assign

这个值在library缺省的情况下, 打包出来的结果运行会出错,因为assign的定义是, 打包出来的结果是赋值给一个全局变量.

libraryTarget: var | jsonp

这2个模块在library缺省的情况, 不工作的, 因为无论是var, 还是jsonp的情况下都是需要一个名称, 所以这里的结果和libraryTarget和library都缺省的情况是一样的.

var 是需要把index.js的入口文件定义成library的变量名
jsonp是需要一个函数名, 而library就是这个函数的名, 函数的参数就是index.js返回的内容.

总结

这里总结了一下webpack里面的属性library, 和libraryTarget打包的各种情况, 但是如果打包一个库来说, rollup才是最棒的工具,trust me~~~.