update webpack-code-splitting

Author: iSpring

tutorials/webpack-code-splitting/.babelrc

@@ -1,3 +1,4 @@
 {
-    "presets": ["es2015"]
+    "presets": ["es2015"],
+    "plugins": ["add-module-exports"]
 }

tutorials/webpack-code-splitting/README.md

@@ -94,7 +94,7 @@ output: {
 我们对`filename`做点修改，将设置为`filename: "[id].[name].bundle.js"`，此处的`[id]`表示chunk id，`[name]`表示chunk name，执行`npm start`重新进行打包，在`buildOutput`目录下生成打包文件`0.main.js`，也就是说我们生成的entry chunk的id为0，chunk name为`main`。在只有一个entry chunk的情况下，将`filename`设置为类似于`"[id].[name].bundle.js"`的值意义不大，大家知道其输出文件名的含义即可，我们会后面的multiple entry中讲解`"[id].[name].bundle.js"`的使用场景。
 
 ### 1.2 entry为字符串数组
-`entry`还可以配置为一个string数组，这种`entry`也属于单一入口(single entry)。
+`entry`还可以配置为一个字符串路径数组，这种`entry`也属于单一入口(single entry)。
 
 修改`webpack.config.js`如下所示：
 ```
@@ -105,7 +105,7 @@ output: {
 }
 ```
 
-我们将`entry`设置为string数组，每个string表示一个路径，Webpack会将每个路径所对应的文件一起打包，生成一个打包文件。执行`npm start`，在`buildOutput`目录下生成打包文件`page12.bundle.js`。
+我们将`entry`设置为字符串数组，每个字符串都表示一个路径，Webpack会将每个路径所对应的文件一起打包，生成一个打包文件。执行`npm start`，在`buildOutput`目录下生成打包文件`page12.bundle.js`。
 
 ```
 page12.bundle.js = webpack runtime + a.js + b.js + c.js + d.js
@@ -142,6 +142,10 @@ output: {
 
 
 ## 2. normal chunk
+通过上面的示例，我想大家已经明白了什么是entry chunk，下面开始今天的正题Code Splitting。
+
+Webpack允许我们在代码中创建分离点，在此处分离点处将会产生一个新的chunk文件。
+
 `page3.js`文件如下所示：
 ```
 import a from "./a.js";
@@ -150,10 +154,13 @@ import b from "./b.js";
 console.log("module a: ", a);
 console.log("module b: ", b);
 
-require.ensure(["./c.js", "./d.js"], function(){
-  const c = require("./c.js");
-  const d = require("./d.js");
-  console.log("module c: ", c);
-  console.log("module d: ", d);
-}, "cd");
+require.ensure([], function() {
+    const c = require("./c.js");
+    const d = require("./d.js");
+    const Person = require("./e.js");
+    const person = new Person("ZhangSan", 28);
+    console.log("module c: ", c);
+    console.log("module d: ", d);
+    console.log("person: ", person.toString());
+}, "cde");
 ```

tutorials/webpack-code-splitting/package.json

@@ -1,29 +1,32 @@
 {
-  "name": "webpack-multiple-entries",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "clear": "rimraf buildOutput",
-    "prebuild": "npm run clear",
-    "build": "webpack --progress --colors",
-    "start": "npm run build"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "babel-core": "^6.18.2",
-    "babel-loader": "^6.2.7",
-    "babel-preset-es2015": "^6.18.0",
-    "cross-env": "^3.2.4",
-    "html-webpack-plugin": "^2.24.1",
-    "rimraf": "^2.5.4",
-    "webpack": "^1.13.3"
-  },
-  "reference": [
-    "https://github.com/webpack/docs/wiki/configuration#entry",
-    "http://webpack.github.io/docs/configuration.html#entry",
-    "http://webpack.github.io/docs/code-splitting.html",
-    "https://github.com/webpack/webpack/tree/master/examples/code-splitting"
-  ]
-}
+    "name": "webpack-multiple-entries",
+    "version": "1.0.0",
+    "description": "",
+    "main": "index.js",
+    "scripts": {
+        "clear": "rimraf buildOutput",
+        "prebuild": "npm run clear",
+        "build": "webpack --progress --colors",
+        "start": "npm run build"
+    },
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "babel-core": "^6.18.2",
+        "babel-loader": "^6.2.7",
+        "babel-plugin-add-module-exports": "^0.2.1",
+        "babel-preset-es2015": "^6.18.0",
+        "cross-env": "^3.2.4",
+        "html-webpack-plugin": "^2.24.1",
+        "rimraf": "^2.5.4",
+        "webpack": "^1.13.3"
+    },
+    "reference": [
+        "https://github.com/webpack/docs/wiki/configuration#entry",
+        "http://webpack.github.io/docs/configuration.html#entry",
+        "http://webpack.github.io/docs/code-splitting.html",
+        "https://github.com/webpack/webpack/tree/master/examples/code-splitting",
+        "http://stackoverflow.com/questions/33505992/babel-6-changes-how-it-exports-default",
+        "https://github.com/59naga/babel-plugin-add-module-exports"
+    ]
+}

tutorials/webpack-code-splitting/src/e.js

@@ -0,0 +1,28 @@
+class Person {
+    constructor(name, age) {
+        this.name = name;
+        this.age = age;
+    }
+
+    setName(name) {
+        this.name = name;
+    }
+
+    getName() {
+        return this.name;
+    }
+
+    setAge(age) {
+        this.age = age;
+    }
+
+    getAge() {
+        return this.age;
+    }
+
+    toString() {
+        return `name: ${this.name}, age: ${this.age}`;
+    }
+}
+
+export default Person;

tutorials/webpack-code-splitting/src/page3.js

@@ -4,9 +4,12 @@ import b from "./b.js";
 console.log("module a: ", a);
 console.log("module b: ", b);
 
-require.ensure(["./c.js", "./d.js"], function(){
-  const c = require("./c.js");
-  const d = require("./d.js");
-  console.log("module c: ", c);
-  console.log("module d: ", d);
-}, "cd");
+require.ensure([], function() {
+    const c = require("./c.js");
+    const d = require("./d.js");
+    const Person = require("./e.js");
+    const person = new Person("ZhangSan", 28);
+    console.log("module c: ", c);
+    console.log("module d: ", d);
+    console.log("person: ", person.toString());
+}, "cde");

tutorials/webpack-code-splitting/webpack.config.js

@@ -15,9 +15,10 @@ module.exports = {
     entry: "./src/page1.js",
     output: {
         path: path.join(__dirname, "buildOutput"),
-        filename: "page1.bundle.js",//=>page1.bundle.js(chunk id: 0, chunk name: main)
-        // filename: "[id].[name].bundle.js"//=>0.main.bundle.js(chunk id: 0, chunk name: main)
-    },*/
+        filename: "page1.bundle.js", //=>page1.bundle.js(chunk id: 0, chunk name: main)
+        // filename: "[id].[name].bundle.js" //=>0.main.bundle.js(chunk id: 0, chunk name: main)
+    },
+    */
 
 
     /*
@@ -42,12 +43,15 @@ module.exports = {
         filename: "[id].[name].bundle.js"//=>0.page1.bundle.js(chunk id: 0, chunck name: page1)  1.page2.bundle.js(chunck id:1, chunck name:page2)
     },*/
 
+
+    //If use require.ensure() to split code, we can use chunkFilename to set name for new created normal chunk.
     entry: "./src/page3.js",
     output: {
         path: path.join(__dirname, "buildOutput"),
         // filename: "page3.bundle.js"//page3.bundle.js(chunk id: 0, chunck name: main) includes webpack runtime, 1.page3.bundle.js(chunk id: 1, chunk name: cd) doesn't include webpack runtime
         // filename: "[id]-[name].js"//0-main.js(chunk id: 0, chunk name: main) 1.1-cd.js(chunk id: 1, chunk name: cd)
-        filename: "page3.bundle.js", chunkFilename: "[id].[name].js"//page3.bundle.js(chunk id: 0, chunck name: main) 1.cd.js(chunk id: 1, chunk name: cd)
+        filename: "page3.bundle.js",
+        chunkFilename: "[id].[name].js" //page3.bundle.js(chunk id: 0, chunck name: main) 1.cd.js(chunk id: 1, chunk name: cd)
     },
 
     module: {