构建Webpack知识体系

学习原因：

1.     理解前端工程化概念、工具，目标

2.     可以成为核心竞争力

3.     高阶前端必经之路

 

主要内容：

——什么是Webpack

——webpack打包核心流程

       ——实例：

       ——Entry=>Depedencies Lookup=>Transform =>Bundle => Output

       ——关键配置项介绍

——loader组件

——plugin组件

——如何学习Webpack

       ——入门级：学会扩展webpack

       ——进阶：学会扩展webpack

       ——大师：源码级理解webpack打包编译原理

 

目标：

1.     理解Webpack基本用法

2.     通过介绍Webpack功能、Loader与Plugin组件设计，建立一个知识体系

 

 

什么是Webpack？

前端由很多文件组成，文件之间可以手动管理，但有以下缺点：

1.     依赖手工，有多个文件时，过程繁琐

2.     开发与生产环境一致，难以接入新特性，南接入工具

3.     JS、图片、CSS资源管理模型不一致

 

因此出现的工程化工具：

Gul(Golang)\

• 简单灵活的语法,类似C语言但加入了垃圾回收功能
• 编译速度快,编译后的可执行文件很小
• 内置并发支持,通过goroutine和channel实现轻量级线程
• 开源免费,并且有Google长期维护
• 良好的文档和社区支持

Golang适用于以下场景:

• 网络服务/API开发

• 命令行工具和系统工具开发

• 并发性能要求较高的场景

• 需要编译速度和部署效率的服务器端应用 ViteVite的主要特性包括:

• 超快的热重载速度,平均1-2秒重新构建

• 无需配置,直接支持ES模块化

• 轻量快速,不需要预构建步骤

• 天然支持TypeScript和JSX

• 支持Vue和React框架

Vite使用了原生ES模块化,并通过模块映射在开发环境下实现热重载。它不会像Webpack那样打包输出整体文件,而是直接使用原生ESM模块化开发。

适用于以下情况使用Vite:

• 需要快速开发体验的前端项目

• 重构中小型项目

• 使用Vue或React开发SPA应用

• 需要快速上手的脚手架项目
  rollup.jsRollup的主要特性:

• 打包速度快,体积小。支持Treeshaking去除未引用代码

• 支持ES6模块化和CommonJS模块

• 可以打包成多种格式,如IIFE,UMD,ESM,CJS等

• 丰富的插件生态系统

• 可以整合到其他构建系统中

Rollup适用于:

• 开发JavaScript库时打包
• 构建需要模块化的前端项目
• 需要优化后的包体积
• 需要输出不同模块规范的代码

 

Bundle:

多份资源文件打包成一个bundle

只是Babel、Eslint、TS、CoffeScript、Less、Sass

支持模块化处理css、图片等资源文件

支持HMR+开发服务器

支持持续坚挺、持续构建

支持代码分离

支持Tree_shaking

支持Sourcemap