library and externals.cn

You developed a library and want to distribute it in compiled/bundled versions (in addition to the modularized version). You want to allow the user to use it in a <script>-tag or with a amd loader (i. e. require.js). Or you depend on various precompilations and want to remove the pain for the user and distribute it as simple compiled commonjs module.

你开发了一个库并想将其以编译过/打包过的形式分发（除了模块化的版本）。你想让用户在一个<script>标签中或者通过一个 amd 加载器使用（例如require.js）。或者你依赖于各种预编译过程，并想为用户排除痛点，而将其以一个简单的编译过的 commonjs 模块分发。

configuration options

配置选项

Webpack has three configuration options that are relevant for these use cases: output.library, output.libraryTarget and externals.

Webpack 有针对这些使用情况下的三个 configuration 选项：output.library, output.libraryTarget 和 externals

output.libraryTarget allows you to specify the type of output. I.e. CommonJs, AMD, for usage in a script tag or as UMD module.

output.libraryTarget 允许你指定输出的类型。如 CommonJS，AMD，在<script>标签使用或作为 UMD 模块。

output.library allows you to optionally specify the name of your library.

output.library 允许你可选地指定库的名称。

externals allows you to specify dependencies for your library that are not resolved by webpack, but become dependencies of the output. This means they are imported from the environment during runtime.

externals 允许你指定你的库的依赖不由 webpack 解析，但成为输出的依赖。这意味着它们在运行期间从环境导入。

Examples

Compile library for usage in a <script>-tag

编译库以在<script>标签中使用

• depends on "jquery", but jquery should not be included in the bundle.

• library should be available at Foo in the global context.

• 依赖"jquery"，但 jquery 不应包含在bundle。

• 库应该在全局语境中的Foo可用。

var jQuery = require("jquery");
var math = require("math-library");

function Foo() {}

// ...

module.exports = Foo;

Recommended configuration (only relevant stuff): 推荐配置（仅包含相关的）：

{
	output: {
		// export itself to a global var
		libraryTarget: "var",
		// name of the global var: "Foo"
		library: "Foo"
	},
	externals: {
		// require("jquery") is external and available
		//  on the global var jQuery
		"jquery": "jQuery"
	}
}

Resulting bundle: 结果 bundle：

var Foo = (/* ... webpack bootstrap ... */
{
	0: function(...) {
		var jQuery = require(1);
		/* ... */
	},
	1: function(...) {
		module.exports = jQuery;
	},
	/* ... */
});

Applications and externals

应用程序和外部库

You can also use the externals option to import an existing API into applications. For example, if you want to use jQuery from a CDN via a separate <script> tag while still explicitly declaring it as a dependancy via require("jquery"), you would specify it as external like so: { externals: { jquery: "jQuery" } }.

你也可以使用externals选项，将现有的 API 引入到应用中。例如，你想通过 CDN 使用jQuery（独立​​<script>标签），却还显示声明为依赖require("jquery")。你需要将其指定为外部库： { externals: { jquery: "jQuery" } }。

Resolving and externals

解析外部库

Externals processing happens before resolving the request, which means you need to specify the unresolved request. Loaders are not applied to externals, so you need to "externalize" a request with a loader: require("bundle!jquery") { externals: { "bundle!jquery": "bundledJQuery" } }

外部库的处理要先于请求的解析，这意味着你需要指定无法解析的请求。loader 不会被应用到外部库，那你你需要外部化一个使用 loader 的请求(require("bundle!jquery"))： { externals: { "bundle!jquery": "bundledJQuery" } }