Common and vendor chunk example

gordonkristan · gordonkristan · commit 8bbad200d4ef · 2016-01-03T21:07:08.000-06:00
diff --git a/examples/common-chunk-and-vendor-chunk/README.md b/examples/common-chunk-and-vendor-chunk/README.md
diff --git a/examples/common-chunk-and-vendor-chunk/build.js b/examples/common-chunk-and-vendor-chunk/build.js
@@ -0,0 +1,2 @@
+global.NO_TARGET_ARGS = true;
+require("../build-common");
diff --git a/examples/common-chunk-and-vendor-chunk/pageA.js b/examples/common-chunk-and-vendor-chunk/pageA.js
@@ -0,0 +1,4 @@
+var utility1 = require('./utility1');
+var utility2 = require('./utility2');
+
+module.exports = "pageA";
diff --git a/examples/common-chunk-and-vendor-chunk/pageB.js b/examples/common-chunk-and-vendor-chunk/pageB.js
@@ -0,0 +1,4 @@
+var utility2 = require('./utility2');
+var utility3 = require('./utility3');
+
+module.exports = "pageB";
diff --git a/examples/common-chunk-and-vendor-chunk/pageC.js b/examples/common-chunk-and-vendor-chunk/pageC.js
@@ -0,0 +1,4 @@
+var utility2 = require('./utility2');
+var utility3 = require('./utility3');
+
+module.exports = "pageC";
diff --git a/examples/common-chunk-and-vendor-chunk/template.md b/examples/common-chunk-and-vendor-chunk/template.md
@@ -0,0 +1,82 @@
+This example shows how to create an explicit vendor chunk as well as a common chunk for code shared among entry points. In this example, we have 3 entry points: `pageA`, `pageB`, and `pageC`. Those entry points share some of the same utility modules, but not others. This configuration will pull out any modules common to at least 2 bundles and place it it the `common` bundle instead, all while keeping the specified vendor libraries in their own bundle by themselves.
+
+To better understand, here are the entry points and which utility modules they depend on:
+
+- `pageA`
+ - `utility1`
+ - `utility2`
+- `pageB`
+ - `utility2`
+ - `utility3`
+- `pageC`
+ - `utility2`
+ - `utility3`
+
+Given this configuration, webpack will produce the following bundles:
+
+- `vendor`
+ - webpack runtime
+ - `vendor1`
+ - `vendor2`
+- `common`
+ - `utility2`
+ - `utility3`
+- `pageA`
+ - `pageA`
+ - `utility1`
+- `pageB`
+ - `pageB`
+- `pageC`
+ - `pageC`
+
+With this bundle configuration, you would load your third party libraries, then your common application code, then your page-specific application code.
+
+# webpack.config.js
+
+``` javascript
+{{webpack.config.js}}
+```
+
+# js/vendor.js
+
+``` javascript
+{{js/vendor.js}}
+```
+
+# js/common.js
+
+``` javascript
+{{js/common.js}}
+```
+
+# js/pageA.js
+
+``` javascript
+{{js/pageA.js}}
+```
+
+# js/pageB.js
+
+``` javascript
+{{js/pageB.js}}
+```
+
+# js/pageC.js
+
+``` javascript
+{{js/pageC.js}}
+```
+
+# Info
+
+## Uncompressed
+
+```
+{{stdout}}
+```
+
+## Minimized (uglify-js, no zip)
+
+```
+{{min:stdout}}
+```
diff --git a/examples/common-chunk-and-vendor-chunk/utility1.js b/examples/common-chunk-and-vendor-chunk/utility1.js
@@ -0,0 +1 @@
+module.exports = "utility1";
diff --git a/examples/common-chunk-and-vendor-chunk/utility2.js b/examples/common-chunk-and-vendor-chunk/utility2.js
@@ -0,0 +1 @@
+module.exports = "utility2";
diff --git a/examples/common-chunk-and-vendor-chunk/utility3.js b/examples/common-chunk-and-vendor-chunk/utility3.js
@@ -0,0 +1 @@
+module.exports = "utility3";
diff --git a/examples/common-chunk-and-vendor-chunk/vendor1.js b/examples/common-chunk-and-vendor-chunk/vendor1.js
@@ -0,0 +1 @@
+module.exports = "vendor1";
diff --git a/examples/common-chunk-and-vendor-chunk/vendor2.js b/examples/common-chunk-and-vendor-chunk/vendor2.js
@@ -0,0 +1 @@
+module.exports = "vendor2";
diff --git a/examples/common-chunk-and-vendor-chunk/webpack.config.js b/examples/common-chunk-and-vendor-chunk/webpack.config.js
@@ -0,0 +1,24 @@
+var path = require("path");
+var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
+
+module.exports = {
+	entry: {
+		vendor: ["./vendor1", "./vendor2"],
+		pageA: "./pageA",
+		pageB: "./pageB",
+		pageC: "./pageC"
+		// older versions of webpack may require an empty entry point declaration here
+		// common: []
+	},
+	output: {
+		path: path.join(__dirname, "js"),
+		filename: "[name].js"
+	},
+	plugins: [
+		new CommonsChunkPlugin({
+			// The order of this array matters
+			names: ["common", "vendor"],
+			minChunks: 2
+		})
+	]
+};

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+global.NO_TARGET_ARGS = true;`
	`2`	`+require("../build-common");`