update

Author: iSpring

README.md

@@ -56,8 +56,8 @@ React技术栈系列教程，涉及React、Redux、Babel、Webpack等相关技
   1. JSX语法
   2. React组件
   3. React组件状态与生命周期
-  4. React组件事件
-  5. React组件ref
+  4. React组件事件和ref
+  5. 在React中使用CSS Module
 
 - Redux
   1. Redux使用基础

tutorials/webpack-common-chunk/README.md

@@ -1 +1 @@
-
+# CommonsChunkPlugin

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

@@ -0,0 +1,23 @@
+var path = require("path");
+
+var webpack = require("webpack");
+
+module.exports = {
+	entry: {
+		utility1: "./src/utility1",
+		utility2: "./src/utility2",
+		utility3: "./src/utility3"
+	},
+
+	output: {
+		path: path.join(__dirname, "buildOutput"),
+		filename: "[name].js"
+	},
+
+	plugins: [
+		new webpack.optimize.CommonsChunkPlugin({
+			// init.js用于存储webpack runtime的代码以及被所有entry都是用的公共模块，本例中init.js = webpack runtime
+			name: "init"
+		})
+	]
+};

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

@@ -0,0 +1,30 @@
+var path = require("path");
+
+var webpack = require("webpack");
+
+module.exports = {
+	entry: {
+		pageA: "./src/pageA",
+		pageB: "./src/pageB"
+	},
+
+	output: {
+		path: path.join(__dirname, "buildOutput"),
+		filename: "[name].js"
+	},
+
+	// plugins: [
+	// 	new webpack.optimize.CommonsChunkPlugin({
+	// 		//本例中init.js = webpack runtime + polyfill + utility2
+	// 		name: "init"
+	// 	})
+	// ]
+
+	plugins: [
+		new webpack.optimize.CommonsChunkPlugin({
+			//本例中init.js = webpack runtime
+			name: "init",
+			minChunks: Infinity
+		})
+	]
+};

tutorials/webpack-common-chunk/package.json

@@ -7,7 +7,9 @@
     "clear": "rimraf buildOutput",
     "prebuild": "npm run clear",
     "build": "webpack",
-    "start": "npm run build"
+    "start": "npm run build",
+    "example1": "rimraf buildOutput && webpack --config example1.config.js",
+    "example2": "rimraf buildOutput && webpack --config example2.config.js"
   },
   "author": "",
   "license": "ISC",
@@ -17,7 +19,8 @@
     "webpack": "^1.13.3"
   },
   "reference": [
-    "https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin"
+    "https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin",
+    "http://stackoverflow.com/questions/39548175/can-someone-explain-webpacks-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/pageA.js renamed to tutorials/webpack-common-chunk/src/pageA.js

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

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

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

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

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

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

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

tutorials/webpack-common-chunk/utility1.js renamed to tutorials/webpack-common-chunk/src/utility1.js

@@ -1,12 +1,22 @@
 var path = require("path");
+
 var webpack = require("webpack");
 
+//vendor1
+//vendor2
+//utility1
+//utility2
+//utility3
+//pageA = polyfill + utility1 + utility2
+//pageB = polyfill + utility2 + utility3
+//pageC = polyfill + utility2 + utility3
+
 module.exports = {
 	entry: {
-		vendor: ["./vendor1", "./vendor2"],
-		pageA: "./pageA",
-		pageB: "./pageB",
-		pageC: "./pageC"
+		vendor: ["./src/polyfill", "./src/vendor1", "./src/vendor2"],
+		pageA: "./src/pageA",
+		pageB: "./src/pageB",
+		pageC: "./src/pageC"
 	},
 
 	output: {
@@ -16,14 +26,16 @@ module.exports = {
 
 	// plugins: [
 	// 	new webpack.optimize.CommonsChunkPlugin({
-	// 		// init.js用于存储webpack runtime的代码以及被所有entry都是用的公共模块，本例中init.js = webpack runtime
+	// 		// 在不使用CommonsChunkPlugin插件时，会生成四个entry chunk文件，pageA.js、pageB.js、pageC.js和vendor.js，这四个文件中都包含webpack runtime和polyfill，
+	// 		// 所以CommonsChunkPlugin插件会将这四个文件中的webpack runtime和polyfill提取出来，放到init.js中
+	// 		// init.js用于存储webpack runtime的代码以及被所有entry都是用的公共模块，本例中init.js = webpack runtime + polyfill
 	// 		name: "init"
 	// 	})
 	// ]
 
 	// plugins: [
 	// 	new webpack.optimize.CommonsChunkPlugin({
-	// 		// init.js用于存储webpack runtime的代码以及至少被3个entry都使用的公共模块，即init.js = webpack runtime + utility2.js
+	// 		// init.js用于存储webpack runtime的代码以及至少被3个entry都使用的公共模块，即init.js = webpack runtime + polyfill + utility2.js
 	// 		name: "init",
 	// 		minChunks: 3
 	// 	})
@@ -37,23 +49,37 @@ 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({
 	// 		//顺序很重要
-	// 		//common.js用于至少被2个entry都使用的公共模块，即common.js = utility2.js + utility3.js
+    //  	//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
 	// 	})
 	// ]
 
-	plugins: [
-		new webpack.optimize.CommonsChunkPlugin({
-			//顺序很重要
-			//common.js用于至少被2个entry都使用的公共模块，即common.js = utility2.js + utility3.js
-			//vendor本身是一个entry，其包含vendor1和vendor2的代码，在此基础上vendor.js还会包含webpack runtime的代码，即vendor.js = webpack runtime + vendor1.js + vendor2.js
-			names: ["common", "vendor"],
-			minChunks: 2
-		})
-	]
+	// plugins: [
+	// 	new webpack.optimize.CommonsChunkPlugin({
+	// 		//顺序很重要
+	// 		//common.js用于至少被2个entry都使用的公共模块，即common.js = utility2.js + utility3.js
+	// 		//vendor本身是一个entry，其包含vendor1和vendor2的代码，在此基础上vendor.js还会包含webpack runtime的代码，即vendor.js = webpack runtime + vendor1.js + vendor2.js
+	// 		names: ["common", "vendor"],
+	// 		minChunks: 2
+	// 	})
+	// ]
 };