Jason Lee
首页
  • 学习笔记

    • 常用资源
    • html&css
    • webpack
    • vue2.x
    • vue3
    • typescript入门
    • 工程化实践
  • css
  • javascript
  • es6常问
  • 手写代码
  • 错误监控
  • webpack
  • vue框架
  • 浏览器相关
  • 计算机网络
  • 数据结构和算法
  • 学习笔记
工具
首页
  • 学习笔记

    • 常用资源
    • html&css
    • webpack
    • vue2.x
    • vue3
    • typescript入门
    • 工程化实践
  • css
  • javascript
  • es6常问
  • 手写代码
  • 错误监控
  • webpack
  • vue框架
  • 浏览器相关
  • 计算机网络
  • 数据结构和算法
  • 学习笔记
工具
    • 常用资源
    • webpack

      • 01.简单搭建
      • 02.基础概念
      • webpack 工作原理
        • 工作原理
    • html&css
    • vue2.x
    • vue3
    • typescript入门
    • 前端工程化实践
  • 前端
  • 01学习笔记
  • webpack
jason lee
2021-09-06
目录

webpack 工作原理

# 工作原理

  • 初始化参数: 解析webpack配置参数,合并shell传入和webpack.config.js文件配置的参数,形成最后的配置结果;

  • 开始编译: 上一步得到的参数初始化compiler对象,注册所有配置的插件,插件 监听webpack构建生命周期的事件节点,做出相应的反应,执行对象的run方法开始执行编译;

  • 确定入口: 从配置的entry入口,开始解析文件构建AST语法树,找出依赖,递归下去;

  • 编译模块: 递归中根据文件类型和loader配置,调用所有配置的loader对文件进行转换,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;

  • 完成模块编译并输出: 递归完事后,得到每个文件结果,包含每个模块以及他们之间的依赖关系,根据entry或分包配置生成代码块chunk;

  • 输出完成: 输出所有的chunk到文件系统;

02.基础概念
html&css

← 02.基础概念 html&css→

Theme by Vdoing | Copyright © 2019-2022 jason lee | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式