Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 524b36b

Browse files
committed
update webpack-code-splitting
1 parent 01c842a commit 524b36b

File tree

6 files changed

+93
-47
lines changed

6 files changed

+93
-47
lines changed
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"presets": ["es2015"]
2+
"presets": ["es2015"],
3+
"plugins": ["add-module-exports"]
34
}

‎tutorials/webpack-code-splitting/README.md

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ output: {
9494
我们对`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"`的使用场景。
9595

9696
### 1.2 entry为字符串数组
97-
`entry`还可以配置为一个string数组,这种`entry`也属于单一入口(single entry)。
97+
`entry`还可以配置为一个字符串路径数组,这种`entry`也属于单一入口(single entry)。
9898

9999
修改`webpack.config.js`如下所示:
100100
```
@@ -105,7 +105,7 @@ output: {
105105
}
106106
```
107107

108-
我们将`entry`设置为string数组,每个string表示一个路径,Webpack会将每个路径所对应的文件一起打包,生成一个打包文件。执行`npm start`,在`buildOutput`目录下生成打包文件`page12.bundle.js`。
108+
我们将`entry`设置为字符串数组,每个字符串都表示一个路径,Webpack会将每个路径所对应的文件一起打包,生成一个打包文件。执行`npm start`,在`buildOutput`目录下生成打包文件`page12.bundle.js`。
109109

110110
```
111111
page12.bundle.js = webpack runtime + a.js + b.js + c.js + d.js
@@ -142,6 +142,10 @@ output: {
142142

143143

144144
## 2. normal chunk
145+
通过上面的示例,我想大家已经明白了什么是entry chunk,下面开始今天的正题Code Splitting。
146+
147+
Webpack允许我们在代码中创建分离点,在此处分离点处将会产生一个新的chunk文件。
148+
145149
`page3.js`文件如下所示:
146150
```
147151
import a from "./a.js";
@@ -150,10 +154,13 @@ import b from "./b.js";
150154
console.log("module a: ", a);
151155
console.log("module b: ", b);
152156
153-
require.ensure(["./c.js", "./d.js"], function(){
154-
const c = require("./c.js");
155-
const d = require("./d.js");
156-
console.log("module c: ", c);
157-
console.log("module d: ", d);
158-
}, "cd");
157+
require.ensure([], function() {
158+
const c = require("./c.js");
159+
const d = require("./d.js");
160+
const Person = require("./e.js");
161+
const person = new Person("ZhangSan", 28);
162+
console.log("module c: ", c);
163+
console.log("module d: ", d);
164+
console.log("person: ", person.toString());
165+
}, "cde");
159166
```
Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,32 @@
11
{
2-
"name": "webpack-multiple-entries",
3-
"version": "1.0.0",
4-
"description": "",
5-
"main": "index.js",
6-
"scripts": {
7-
"clear": "rimraf buildOutput",
8-
"prebuild": "npm run clear",
9-
"build": "webpack --progress --colors",
10-
"start": "npm run build"
11-
},
12-
"author": "",
13-
"license": "ISC",
14-
"devDependencies": {
15-
"babel-core": "^6.18.2",
16-
"babel-loader": "^6.2.7",
17-
"babel-preset-es2015": "^6.18.0",
18-
"cross-env": "^3.2.4",
19-
"html-webpack-plugin": "^2.24.1",
20-
"rimraf": "^2.5.4",
21-
"webpack": "^1.13.3"
22-
},
23-
"reference": [
24-
"https://github.com/webpack/docs/wiki/configuration#entry",
25-
"http://webpack.github.io/docs/configuration.html#entry",
26-
"http://webpack.github.io/docs/code-splitting.html",
27-
"https://github.com/webpack/webpack/tree/master/examples/code-splitting"
28-
]
29-
}
2+
"name": "webpack-multiple-entries",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"clear": "rimraf buildOutput",
8+
"prebuild": "npm run clear",
9+
"build": "webpack --progress --colors",
10+
"start": "npm run build"
11+
},
12+
"author": "",
13+
"license": "ISC",
14+
"devDependencies": {
15+
"babel-core": "^6.18.2",
16+
"babel-loader": "^6.2.7",
17+
"babel-plugin-add-module-exports": "^0.2.1",
18+
"babel-preset-es2015": "^6.18.0",
19+
"cross-env": "^3.2.4",
20+
"html-webpack-plugin": "^2.24.1",
21+
"rimraf": "^2.5.4",
22+
"webpack": "^1.13.3"
23+
},
24+
"reference": [
25+
"https://github.com/webpack/docs/wiki/configuration#entry",
26+
"http://webpack.github.io/docs/configuration.html#entry",
27+
"http://webpack.github.io/docs/code-splitting.html",
28+
"https://github.com/webpack/webpack/tree/master/examples/code-splitting",
29+
"http://stackoverflow.com/questions/33505992/babel-6-changes-how-it-exports-default",
30+
"https://github.com/59naga/babel-plugin-add-module-exports"
31+
]
32+
}
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
class Person {
2+
constructor(name, age) {
3+
this.name = name;
4+
this.age = age;
5+
}
6+
7+
setName(name) {
8+
this.name = name;
9+
}
10+
11+
getName() {
12+
return this.name;
13+
}
14+
15+
setAge(age) {
16+
this.age = age;
17+
}
18+
19+
getAge() {
20+
return this.age;
21+
}
22+
23+
toString() {
24+
return `name: ${this.name}, age: ${this.age}`;
25+
}
26+
}
27+
28+
export default Person;

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,12 @@ import b from "./b.js";
44
console.log("module a: ", a);
55
console.log("module b: ", b);
66

7-
require.ensure(["./c.js", "./d.js"], function(){
8-
const c = require("./c.js");
9-
const d = require("./d.js");
10-
console.log("module c: ", c);
11-
console.log("module d: ", d);
12-
}, "cd");
7+
require.ensure([], function() {
8+
const c = require("./c.js");
9+
const d = require("./d.js");
10+
const Person = require("./e.js");
11+
const person = new Person("ZhangSan", 28);
12+
console.log("module c: ", c);
13+
console.log("module d: ", d);
14+
console.log("person: ", person.toString());
15+
}, "cde");

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,10 @@ module.exports = {
1515
entry: "./src/page1.js",
1616
output: {
1717
path: path.join(__dirname, "buildOutput"),
18-
filename: "page1.bundle.js",//=>page1.bundle.js(chunk id: 0, chunk name: main)
19-
// filename: "[id].[name].bundle.js"//=>0.main.bundle.js(chunk id: 0, chunk name: main)
20-
},*/
18+
filename: "page1.bundle.js", //=>page1.bundle.js(chunk id: 0, chunk name: main)
19+
// filename: "[id].[name].bundle.js" //=>0.main.bundle.js(chunk id: 0, chunk name: main)
20+
},
21+
*/
2122

2223

2324
/*
@@ -42,12 +43,15 @@ module.exports = {
4243
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)
4344
},*/
4445

46+
47+
//If use require.ensure() to split code, we can use chunkFilename to set name for new created normal chunk.
4548
entry: "./src/page3.js",
4649
output: {
4750
path: path.join(__dirname, "buildOutput"),
4851
// 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
4952
// filename: "[id]-[name].js"//0-main.js(chunk id: 0, chunk name: main) 1.1-cd.js(chunk id: 1, chunk name: cd)
50-
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)
53+
filename: "page3.bundle.js",
54+
chunkFilename: "[id].[name].js" //page3.bundle.js(chunk id: 0, chunck name: main) 1.cd.js(chunk id: 1, chunk name: cd)
5155
},
5256

5357
module: {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /