update webpack-common-chunk

Author: iSpring

tutorials/webpack-common-chunk/README.md

@@ -1 +1,5 @@
-# CommonsChunkPlugin
+# CommonsChunkPlugin
+
+CommonsChunkPlugin插件会生成公共chunk，这个公共chunk会变成entry chunk，即包含webpack runtime，而且会包含其他公共的模块。
+
+应尽量将长期不变动的类库打包到一个vendor chunk文件中，而且这个文件中不应该包含webpack runtime以及其他公共模块，因为webpack runtime和公共模块的代码都会变化，这会导致vendor chunk缓存失效。

tutorials/webpack-common-chunk/example2.config.js

@@ -15,14 +15,14 @@ module.exports = {
 
 	// plugins: [
 	// 	new webpack.optimize.CommonsChunkPlugin({
-	// 		//本例中init.js = webpack runtime + polyfill + utility2
+	// 		//init.js = webpack runtime + polyfill + utility2
 	// 		name: "init"
 	// 	})
 	// ]
 
 	plugins: [
 		new webpack.optimize.CommonsChunkPlugin({
-			//本例中init.js = webpack runtime
+			//init.js = webpack runtime
 			name: "init",
 			minChunks: Infinity
 		})

tutorials/webpack-common-chunk/package.json

@@ -21,6 +21,7 @@
   "reference": [
     "https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin",
     "http://stackoverflow.com/questions/39548175/can-someone-explain-webpacks-commonschunkplugin",
+    "http://stackoverflow.com/questions/35908253/webpack-how-to-bundle-entries-to-multiple-common-chunks-with-commonschunkplugin",
     "https://webpack.js.org/plugins/commons-chunk-plugin/",
     "https://github.com/webpack/webpack/tree/master/examples/common-chunk-and-vendor-chunk",
     "https://github.com/webpack/webpack/tree/master/examples/multiple-entry-points-commons-chunk-css-bundle",

tutorials/webpack-common-chunk/src/jQuery.js

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

tutorials/webpack-common-chunk/src/pageA.js

@@ -1,4 +1,6 @@
 var polyfill = require('./polyfill');
+var jQuery = require('./jQuery');
+var underscore = require('./underscore');
 var utility1 = require('./utility1');
 var utility2 = require('./utility2');
 

tutorials/webpack-common-chunk/src/pageB.js

@@ -1,4 +1,6 @@
 var polyfill = require('./polyfill');
+var jQuery = require('./jQuery');
+var underscore = require('./underscore');
 var utility2 = require('./utility2');
 var utility3 = require('./utility3');
 

tutorials/webpack-common-chunk/src/pageC.js

@@ -1,4 +1,6 @@
 var polyfill = require('./polyfill');
+var jQuery = require('./jQuery');
+var underscore = require('./underscore');
 var utility2 = require('./utility2');
 var utility3 = require('./utility3');
 

tutorials/webpack-common-chunk/src/underscore.js

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

tutorials/webpack-common-chunk/src/vendor1.js

@@ -13,7 +13,7 @@ var webpack = require("webpack");
 
 module.exports = {
 	entry: {
-		vendor: ["./src/polyfill", "./src/vendor1", "./src/vendor2"],
+		vendor: ["./src/polyfill", "./src/jQuery", "./src/underscore"],
 		pageA: "./src/pageA",
 		pageB: "./src/pageB",
 		pageC: "./src/pageC"
@@ -49,30 +49,38 @@ module.exports = {
 	// 	})
 	// ]
 
-	//http://stackoverflow.com/questions/39548175/can-someone-explain-webpacks-commonschunkplugin
-	plugins: [
-		new webpack.optimize.CommonsChunkPlugin({
-			name: "common",
-			minChunks: 2
-		}),
-
-		new webpack.optimize.CommonsChunkPlugin({
-			name: "init",
-			minChunks: 2
-		})
-	]
+	// plugins: [
+	// 	new webpack.optimize.CommonsChunkPlugin({
+	// 		// init.js只用于存储webpack runtime的代码，即init.js = webpack runtime
+	// 		name: "init",
+	// 		minChunks: Infinity
+	// 	})
+	// ]
 
 	// plugins: [
 	// 	new webpack.optimize.CommonsChunkPlugin({
 	// 		//顺序很重要
-    //  	//If an array of strings is passed this is equal to invoking the plugin multiple times for each chunk name.
+  //    //If an array of strings is passed this is equal to invoking the plugin multiple times for each chunk name.
 	// 		//common.js用于至少被2个entry都使用的公共模块，即common.js = polyfill + utility2.js + utility3.js
 	// 		//init.js用于存储webpack runtime的代码，即init.js = webpack runtime
 	// 		names: ["common", "init"],
 	// 		minChunks: 2
 	// 	})
 	// ]
 
+	//http://stackoverflow.com/questions/39548175/can-someone-explain-webpacks-commonschunkplugin
+	// plugins: [
+	// 	new webpack.optimize.CommonsChunkPlugin({
+	// 		name: "common",
+	// 		minChunks: 2
+	// 	}),
+
+	// 	new webpack.optimize.CommonsChunkPlugin({
+	// 		name: "init",
+	// 		minChunks: 2
+	// 	})
+	// ]
+
 	// plugins: [
 	// 	new webpack.optimize.CommonsChunkPlugin({
 	// 		//顺序很重要
@@ -82,4 +90,16 @@ module.exports = {
 	// 		minChunks: 2
 	// 	})
 	// ]
+
+	//http://stackoverflow.com/questions/35908253/webpack-how-to-bundle-entries-to-multiple-common-chunks-with-commonschunkplugin
+	plugins: [
+		new webpack.optimize.CommonsChunkPlugin({
+			name: "vendor",
+			chunks: ["vendor"]
+		}),
+		new webpack.optimize.CommonsChunkPlugin({
+			name: "init",
+			chunks: ["pageA", "pageB", "pageC"]
+		})
+	]
 };