webpack

项目

前端项目由各种资源构成，webpack 本质只是一个打包工具

使用概念

• npm 安装
• 编辑配置文件
• 执行编译命令

配置文件

entry ：入口文件
output --> filename :打包后的文件名

工作流程

1. 入口处理：从entry 文件开始，启动编译流程
2. 依赖解析： 从entry文件开始，根据require or import 等语句找到依赖资源
3. 资源解析：根据 module 配置，调用资源转移器，将png ,css 等 非标准JS资源转为JS内容
4. 资源合并打包： 将转移后的资源内容合并打包为可直接在浏览器运行的JS运行

模块化&&一致性

1. 多个文件资源合并成一个，减少http请求次数
2. 支持模块化开发
3. 支持高级JS特性
4. 支持Typescript ,coffeescript
5. 统计图片，CSS，字体等其他资源的处理模型

配置类型

• 流程类：作用于流程中某个 or 若干个环节，直接影响打包效果的配置项
• 工具类： 主流程之外，提供更丰富的工程化工具

导入 CSS

使用 mdules use导入 loader test 过滤文件

使用babel

npm 安装相应 loarder

使用插件

可以自动生成HTML文件

HMR

模块热载入

tree-shacking

loader

为了处理非标准JS资源，设计出资源翻译模块

• npm 装依赖
• module 里使用loarder

插件

降低使用成本

vite

1. 模块化方案
   1. 提供模块加载方案
   2. 兼容不同模块规范
2. 语法转译
   1. 高级语法转译
   2. 资源加载
3. 产物质量
   1. 产物压缩，无用代码删除，语法降级
4. 开发效率
   1. 热更新

概览

1. No-bundle 开发服务，源文件无需打包
2. 生产环境基于Rollup的Bundle
3. 高性能，dev启动速度和热更新速度非常快
4. 简单易用，开发者体验好