Skip to content

Commit 3f7f3c6

Browse files
committed
update webpack-code-splitting
1 parent 5d327da commit 3f7f3c6

File tree

1 file changed

+24
-4
lines changed

1 file changed

+24
-4
lines changed

tutorials/webpack-code-splitting/README.md

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,11 @@ module.exports = "module d";
4343

4444
如上所示,`a.js``b.js``c.js``d.js`这四个文件都是普通的CommonJS模块。
4545

46+
`chunk`,英文直译过来是`数据块`的意思,我们可以把一个`chunk`看做是一个文件,这个文件里可以包含一个或多个模块(比如a.js、b.js等)。
47+
48+
`chunk`总的来说可以分为`entry chunk``normal chunk``normal chunk`指的就是`non-entry chunk`
49+
50+
我们首先看一下最简单的`entry chunk`
4651

4752
## entry chunk
4853
`page1.js`中引入了`a.js``b.js`模块,如下所示:
@@ -63,13 +68,28 @@ console.log("module c: ", c);
6368
console.log("module d: ", d);
6469
```
6570

66-
`chunk`,英文直译过来是`数据块`的意思,我们可以把一个`chunk`看做是一个文件,这个文件里可以包含一个或多个模块(比如a.js、b.js等)。
71+
### string entry
72+
`webpack.config.js`中的`entry`用于设置打包的入口文件,即要将哪些资源进行打包。`output.path``output.filename`分别用于设置打包的输出目录和输出文件。
6773

68-
`chunk`总的来说可以分为`entry chunk``normal chunk``normal chunk`指的就是`non-entry chunk`
74+
我们将`webpack.config.js`配置如下所示:
75+
```
76+
entry: "./src/page1.js",
77+
output: {
78+
path: path.join(__dirname, "buildOutput"),
79+
filename: "page1.bundle.js"
80+
}
81+
```
6982

70-
我们首先看一下最简单的`entry chunk`
83+
`page1.js`中引入了`a.js``b.js`模块,执行`npm start`进行打包,在`buildOutput`目录下生成打包文件`page1.bundle.js`,该文件就是一个入口chunk(entry chunk),即根据entry生成的打包文件
7184

72-
### string entry
85+
打开`page1.bundle.js`文件我们可以看到包含很多类似于`__webpack_require__()`之类的函数,通过这些方法可以在浏览器中加载相应的模块资源,我们把这些方法叫做`webpack runtime`,即webpack运行时代码逻辑。
86+
87+
所以
88+
```
89+
`page1.bundle.js` = webpack runtime + a.js + b.js
90+
```
91+
92+
我们再次做点修改,将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这一种chunk的情况下,将`filename`设置为类似于`"[id].[name].bundle.js"`的值意义不大,大家知道其输出文件名的含义即可。
7393

7494
### array entry
7595

0 commit comments

Comments
 (0)