https://github.com/shunyue1320/webpack-learn

webpack learning list
https://github.com/shunyue1320/webpack-learn

Last synced: 7 months ago
JSON representation

webpack learning list

• Host: GitHub
• URL: https://github.com/shunyue1320/webpack-learn
• Owner: shunyue1320
• Created: 2022-03-08T03:20:19.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-03-12T09:36:44.000Z (over 3 years ago)
• Last Synced: 2025-01-30T09:24:07.307Z (8 months ago)
• Language: JavaScript
• Size: 68.4 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# webpack-learn

webpack learning list

## webpack 的编译流程

- 1.初始化参数，从配置文件和 shell 语句中读取并合并参数，并得到最终的配置对象

- 2.用上一步的对象初始化 Compiler 对象

- 3.加载所有的插件

- 4.执行`Compiler`对象的`run`方法开始执行编译

- 5.根据配置文件中的`entry`配置项找到所有的入口

- 6.从入口文件出发，调用所有配置的 loader 规则，比如说 loader 对模块进行编译

- 7.再找出此模块的依赖的模块，再递归本步骤找到依赖的模块进行编译

- 8.等把所有的模块编译完成后，根据模块之间的依赖关系，组装成一个个包含多个模块的 chunk

- 9.再把各个代码块 chunk 转换成一个一个的文件(asset)加入到输出列表

- 10.在确定好输出内容之后，会根据配置的输出的路径和文件名，把文件内容写到文件系统里

  在此过程中，webpack 会在执行过程中发布特定的事件，你可以自己写插件订阅感兴趣的事件，执行自己的逻辑