🎯课程表
📋前言
这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天。
第五届字节跳动青训营的课程已经进入尾声了，继续保持上课的节奏和学习，需要要学习内容较多，因此分为几个部分来学习，今天的内容是学习 Webpack 定义解析的内容，通过该篇文章记录在课程中学到的知识以及重点，对此做相对应的笔记来巩固学习。
📑课程介绍
- 本节课将重点围绕「构建 Webpack 知识体系」这一核心话题展开。在正式学习 Webpack 之前，本节课将解读为什么需要学习 Webpack ，Webpack 的本质是什么以及 Webpack 技术优势等相关知识。
🔥课程重点
- Webpack 的本质
- Webpack 定义解析
- Webpack 优势
主要内容:
什么是 Webpack
Webpack 打包核心流程
- 示例
- Entry => Dependencies Lookup => Transform => Bundle => Output
- 关键配置项介绍
- Loader 组件
- Plugin 组件
- 如何学习 Webpack
- 入门级: 学会灵活应用
- 进阶: 学会扩展 Webpack
- 大师: 源码级理解 Webpack 打包编译原理
📝具体笔记
什么是webpack
webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
本质上是一种前端资源编译、打包工具
- 多份资源文件打包成一个 Bundle
- 支持 Babel、Eslint、TS、CoffeScript、Less、Sass
- 支持模块化处理 css、图片等资源文件
- 支持 HMR + 开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持 Tree-shaking
- 支持 Sourcemap
文章仅为个人学习笔记，如有错误，欢迎指正。
