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";