跳到主要内容

配置项

2024年11月23日
柏拉文
越努力，越幸运

一、output.library.name​

1.1 认识​

output.library.name 指定库的名称。

1.2 语法​

module.exports = {
  output: {
    library: {
      name: 'MyLibrary'
    },
  },
};

二、output.library.type​

2.1 认识​

output.library.type 配置将库暴露的方式。

2.2 语法​

module.exports = {
  output: {
    library: {
      name: 'MyLibrary',
      type: 'var',
    },
  },
};

2.3 type: "var"​

type: "var"

module.exports = {
    output: {
        library: {
            name: 'MyLibrary',
            type: 'var',
        },
    }
};

让你的库加载之后，入口起点的返回值 将会被赋值给一个变量：

var MyLibrary = _entry_return_;

// 在加载了 `MyLibrary` 的单独脚本中
MyLibrary.doSomething();

2.4 type: 'assign'​

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'assign',
    },
  },
};

这将生成一个隐含的全局变量，它有可能重新分配一个现有的值（请谨慎使用）：

MyLibrary = _entry_return_;

请注意，如果 MyLibrary 没有在你的库之前定义，那么它将会被设置在全局作用域。

2.5 type: 'assign-properties'​

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'assign-properties',
    },
  },
};

与 type: 'assign' 相似但是更安全，因为如果 MyLibrary 已经存在的话，它将被重用：

// 仅在当其不存在是创建 MyLibrary
MyLibrary = typeof MyLibrary === 'undefined' ? {} : MyLibrary;
// 然后复制返回值到 MyLibrary
// 与 Object.assign 行为类似

// 例如，你像下面这样在你的入口导出一个 `hello` 函数
export function hello(name) {
  console.log(`Hello ${name}`);
}

// 在另外一个已经加载 MyLibrary 的脚本中
// 你可以像这样运行 `hello` 函数
MyLibrary.hello('World');

2.6 type: 'this'​

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'this',
    },
  },
};

入口起点的返回值将会被赋值给 this 对象下的 output.library.name 属性。this 的含义取决于你：

this['MyLibrary'] = _entry_return_;

// 在一个单独的脚本中
this.MyLibrary.doSomething();
MyLibrary.doSomething(); // 如果 `this` 为 window 对象

2.7 type: 'window'​

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'window',
    },
  },
};

入口起点的返回值 将会被赋值给 window 对象下的 output.library.name。

window['MyLibrary'] = _entry_return_;

window.MyLibrary.doSomething();

2.8 type: 'global'​

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'global',
    },
  },
};

入口起点的返回值 将会被复制给全局对象下的 output.library.name。取决于 target 值，全局对象可以分别改变,例如，self、global 或者 globalThis。

global['MyLibrary'] = _entry_return_;

global.MyLibrary.doSomething();

2.9 type: 'commonjs'​

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'commonjs',
    },
  },
};

入口起点的返回值 将使用 output.library.name 赋值给 exports 对象。顾名思义，这是在 CommonJS 环境中使用。

exports['MyLibrary'] = _entry_return_;

require('MyLibrary').doSomething();

2.10 type: 'module'​

module.exports = {
  // …
  experiments: {
    outputModule: true,
  },
  output: {
    library: {
      // do not specify a `name` here
      type: 'module',
    },
  },
};

输出 ES 模块

2.11 type: 'commonjs2'​

module.exports = {
  // …
  output: {
    library: {
      // note there's no `name` here
      type: 'commonjs2',
    },
  },
};

入口起点的返回值 将会被赋值给 module.exports。顾名思义，这是在 Node.js（CommonJS）环境中使用的：

module.exports = _entry_return_;

require('MyLibrary').doSomething();

2.12 type: 'amd'​

可以将你的库暴露为 AMD 模块。

module.exports = {
  //...
  output: {
    library: {
      name: 'MyLibrary',
      type: 'amd',
    },
  },
};

生成的输出将被定义为 MyLibrary，例如：

define('MyLibrary', [], function () {
  return _entry_return_;
});

该 bundle 可以使用 script 标签引入，并且可以被这样引入：

require(['MyLibrary'], function (MyLibrary) {
  // Do something with the library...
});

如果没有定义 output.library.name 的话，会生成以下内容。

define(function () {
  return _entry_return_;
});

2.13 type: 'umd'​

这将在所有模块定义下暴露你的库, 允许它与 CommonJS、AMD 和作为全局变量工作。在这种情况下，你需要使用 library.name 属性命名你的模块：

module.exports = {
  //...
  output: {
    library: {
      name: 'MyLibrary',
      type: 'umd',
    },
  },
};

最终的输出为：

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if (typeof define === 'function' && define.amd) define([], factory);
  else if (typeof exports === 'object') exports['MyLibrary'] = factory();
  else root['MyLibrary'] = factory();
})(global, function () {
  return _entry_return_;
});

2.14 type: 'system'​

这将会把你的库暴露为一个 System.register 模块。这个特性最初是在 webpack 4.30.0 中发布。

System 模块要求当 webpack bundle 执行时，全局变量 System 出现在浏览器中。编译的 System.register 格式允许你在没有额外配置的情况下使用 System.import('/bundle.js')，并将你的 webpack bundle 加载到系统模块注册表中。

module.exports = {
  //...
  output: {
    library: {
      type: 'system',
    },
  },
};

输出：

System.register([], function (__WEBPACK_DYNAMIC_EXPORT__, __system_context__) {
  return {
    execute: function () {
      // ...
    },
  };
});

2.15 type: 'jsonp'​

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'jsonp',
    },
  },
};

这将把入口起点的返回值包装到 jsonp 包装器中。

MyLibrary(_entry_return_);

三、output.library.export​

3.1 认识​

output.library.export 指定哪一个导出应该被暴露为一个库。默认为 undefined，将会导出整个（命名空间）对象。

3.2 语法​

module.exports = {
  output: {
    library: {
      name: 'MyLibrary',
      type: 'var',
      export: 'default',
    },
  },
};

入口起点的默认导出将会被赋值为库名称：

// 如果入口有一个默认导出
var MyLibrary = _entry_return_.default;

你也可以向 output.library.export 传递一个数组，它将被解析为一个要分配给库名的模块的路径：

module.exports = {
  output: {
    library: {
      name: 'MyLibrary',
      type: 'var',
      export: ['default', 'subModule'],
    },
  },
};

这里就是库代码

var MyLibrary = _entry_return_.default.subModule;

四、output.library.umdNamedDefine​

4.1 认识​

当使用 output.library.type: "umd" 时，将 output.library.umdNamedDefine 设置为 true 将会把 AMD 模块命名为 UMD 构建。否则使用匿名 define。

4.2 语法​

module.exports = {
  //...
  output: {
    library: {
      name: 'MyLibrary',
      type: 'umd',
      umdNamedDefine: true,
    },
  },
};

AMD module 将会是这样：

define('MyLibrary', [], factory);