Skip to content
This repository was archived by the owner on Mar 22, 2019. It is now read-only.

multiple entry points.cn

e-cloud edited this page Jul 12, 2016 · 2 revisions

Prerequirement: Code Splitting 先验知识: Code Splitting

If you need multiple bundles for multiple HTML pages you can use the "multiple entry points" feature. It will build multiple bundles at once. Additional chunks can be shared between these entry chunks and modules are only built once. 如果你想为多个 HTML 页面生成多个 bundle,你可以使用“多个入口点”的特性。它会一次过构建多个 bundle。额外的 chunk 可以在这些入口 chunk 之间共享,而且模块都只会构建一次。

Hint: When you want to start an entry chunk from a module, you are doing something wrong. Use Code Splitting instead! 提示:当你想在一个模块中启动一个入口 chunk,是在弄巧反拙。应该使用Code Splitting

Every entry chunk contains the webpack runtime, so you can only load one entry chunk per page. (Hint: To bypass this limitation use the CommonsChunkPlugin to move the runtime into a single chunk.) 每个入口 chunk 包含了 webpack 运行时,所以每个页面你只可以加载一个入口 chunk。(提示:为了绕过这个限制,使用 CommonsChunkPlugin 来将运行时搬到一个单独的 chunk)

Configuration

配置

To use multiple entry points you can pass an object to the entry option. Each value is threaded as an entry point and the key represents the name of the entry point. 为了使用多个入口点,你可以向entry选项传入一个对象。每个值都会被当做入口点,键代表该入口点的名称。

When using multiple entry points you must override the default output.filename option. Otherwise each entry point would write to the same output file. Use [name] to get the name of the entry point. 当使用多个入口点,你必须覆盖默认的output.filename选项。否则每个入口点会被写入同一个输出文件。使用[name]来匹配入口点的名称。

Minimal example configuration

最简单的样例配置

{
	entry: {
		a: "./a",
		b: "./b",
		c: ["./c", "./d"]
	},
	output: {
		path: path.join(__dirname, "dist"),
		filename: "[name].entry.js"
	}
}

Examples

示例

Clone this wiki locally