Merge branch 'master' of https://github.com/webpack/webpack.git

examples/common-chunk-and-vendor-chunk/build.js

@@ -0,0 +1,2 @@
+global.NO_TARGET_ARGS = true;
+require("../build-common");

examples/common-chunk-and-vendor-chunk/pageA.js

@@ -0,0 +1,4 @@
+var utility1 = require('./utility1');
+var utility2 = require('./utility2');
+
+module.exports = "pageA";

examples/common-chunk-and-vendor-chunk/pageB.js

@@ -0,0 +1,4 @@
+var utility2 = require('./utility2');
+var utility3 = require('./utility3');
+
+module.exports = "pageB";

examples/common-chunk-and-vendor-chunk/pageC.js

@@ -0,0 +1,4 @@
+var utility2 = require('./utility2');
+var utility3 = require('./utility3');
+
+module.exports = "pageC";

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}}
+```

examples/common-chunk-and-vendor-chunk/utility1.js

@@ -0,0 +1 @@
+module.exports = "utility1";

examples/common-chunk-and-vendor-chunk/utility2.js

@@ -0,0 +1 @@
+module.exports = "utility2";

examples/common-chunk-and-vendor-chunk/utility3.js

@@ -0,0 +1 @@
+module.exports = "utility3";

examples/common-chunk-and-vendor-chunk/vendor1.js

@@ -0,0 +1 @@
+module.exports = "vendor1";

examples/common-chunk-and-vendor-chunk/vendor2.js

@@ -0,0 +1 @@
+module.exports = "vendor2";

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
+ })
+ ]
+};