https://github.com/slashhuang/webpack-crash
A webpack crash overview
https://github.com/slashhuang/webpack-crash
webpack
Last synced: about 2 months ago
JSON representation
A webpack crash overview
- Host: GitHub
- URL: https://github.com/slashhuang/webpack-crash
- Owner: slashhuang
- Created: 2017-07-09T08:28:42.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-09T11:03:17.000Z (almost 9 years ago)
- Last Synced: 2025-06-16T01:44:17.039Z (about 1 year ago)
- Topics: webpack
- Language: JavaScript
- Size: 3.91 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# webpack-crash
a webpack overview for webpack developers
## architecture
1. Validate webpack.config Schema （using 'ajv'）*
2. form `Compiler instance `
- webpack.config === Array ==> `MultiCompiler`
- webpack.config ==> `Compiler`
3. `run Compiler`
- if watchMode is true, run `compiler.watch(watchOptions, callback);`
## compiler生命周期
#### 异步流程`eventEmitter`
1. `this.applyPluginsAsync("before-run", this, err => { step2 })`
2. `this.applyPluginsAsync("run", this, err => { step3 })`
3. `this.readRecords(err => { step4 });`
4. `this.applyPluginsAsync("before-compile", params, err => { step5 })`
#### 同步触发所有compile流程
5. `this.applyPlugins("compile", params); const compilation = this.newCompilation(params); ` step6
#### 异步流程
6. `this.applyPluginsParallel("make", compilation, err => { step7 }`
7. `compilation.finish(); compilation.seal(err => { step8 })`
8. `this.applyPluginsAsync("after-compile", compilation, err => { step9 })`
#### 编译结束
1. if(this.applyPluginsBailResult("should-emit", compilation) === false)
```js
if(this.applyPluginsBailResult("should-emit", compilation) === false) {
this.applyPlugins("done", stats);
return callback(null, stats);
}
```
2. else
```js
this.emitAssets(compilation, err => {
if(compilation.applyPluginsBailResult("need-additional-pass")) {
this.applyPluginsAsync("additional-pass", err => {
if(err) return callback(err);
this.compile(onCompiled);
});
}
this.emitRecords(err => {
if(err) return callback(err);
const stats = new Stats(compilation);
stats.startTime = startTime;
stats.endTime = Date.now();
this.applyPlugins("done", stats);
return callback(null, stats);
});
})
```
## 事件触发顺序
1. before-run
2. run
3. before-compile
4. compile [S]
5. make [P]
6. after-compile
7. should-emit [S]
8.2 true
8.2.1 need-additional-pass
8.2.2 additional-pass
9. done