前端学习笔记-Webpack（一）

科粒KL
136 阅读2分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Webpack实属前端知识体系中比较难以记忆的部分，之所以说记忆，是因为它需要理解的少而程序化约定俗成的东西更多，本系列尝试使用思维导图和一句话总结的方式帮助记忆。

配置项

在这里插入图片描述

xmind下载地址 /s/1u2TGbJqO6roOTSAIM8NRew 提取码: geey

完整配置示例：webpack.wuhaolin.cn/2%E9%85%8D%…

打包结果

Webpack可按实际情况对代码进行打包，CJS、ESM和按需加载时的处理方式并不相同：

在这里插入图片描述

xmind下载地址 /s/1pGqWNIbwTIqmmyOz_PB6mg 提取码: brcu

工作流程

在这里插入图片描述

  1. 读取由开发者定义的 webpack.config.js 配置文件 或者从 shell 语句中获得必要的参数；
  2. 实例化所需plugins，webpack 事件流上挂载插件Hook；在构建过程中 插件具备改动产出结果的能力 ，事件流即使用了发布订阅模式。
  3. 同时根据配置所定义的入口，以入口文件(可以不止有一个)为起始 进行依赖收集：
    • 对所依赖的文件进行编译。不同类型文件根据开发者定义的不同 loader 进行解析。
    • 编译好的内容使用 acorn 或其它抽象语法解析能力，生成 AST 静态语法树，分析文件依赖关系；将不同模块化语法 (如require) 等替换为 __webpack_require__ 即 使用 webpack 自己的模块化实现 。
  4. 上述过程进行完毕后 产出结果 根据配置将结果打包到output目录 。

加载 loaded 封存 sealed 优化 optimized 分块 chunked 哈希 hashed 重建 restored

概念理解

  • 一句话总结：chunk是过程 bundle是结果 在这里插入图片描述

compiler 和 compilation

  • compiler对象在构建之初就被创建，贯穿整个生命周期；
  • 每当编译具体模块时，才会创建一次compilation对象；
graph LR
Z[读取配置] --> A[Webpack<br>初始化] --> B(compiler<br>全局控制) --> Q(产出结果)
B --> C(compilation<br>)
C --> B

TO DO：下回继续分解

avatar
文章
阅读
粉丝