前端与Webpack ｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天

什么是 Webpack

前言

前端总是伴随着各种各样的资源加载，但是资源特别多的情况下对开发效率影响还是特别大的。于是出现了许多工程化工具。在一些程度上来讲，正是因为这些工具的出现，才有了前端工程这一概念。

什么是 Webpack

本质上是一种前端资源编译、打包工具。

使用 Webpack

1. 安装
2. 编辑配置文件
3. 运行

核心流程

1. entry——入口处理

从 entry 文件开始，启动编译流程 2. require/import——依赖解析

从 entry 文件开始，根据 requireorimport 等语句找到依赖资源 3. module——资源解析 根据 module 配置，调用资源转移器，将png、css 等非标准JS资源转 译为JS内容 4.output——资源合并打包 将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

Webpack优势

模块化 + 一致性

• 多个文件资源合并成一个，减少http请求数
• 支持模块化开发
• 支持高级JS特性
• 支持Typescript、CoffeeScript 方言-统一图片、css、字体等其它资源的处理模型
• . . .

webpack配置

我们可以发现，这些都是围绕着webpack的配置来讲的，大致可以划分为两类：

1. 流程类:作用于流程中某个or 若干个环节，直接影响打包效果的配置项

• 输入
• 模块处理
• 后处理
• 输出

2. 工具类:主流程之外，提供更多工程化能力的配置项

• 开发效率类
• 性能优化类
• 日志类

处理CSS

1. 安装loade
2. 添加 module 处理 css文件

接入babel

1. 安装依赖
2. 声明产物出口
3. 执行 npx webpack

生成HTML

1. 安装依赖
2. 声明产物出口
3. 执行 npx webpack

Loader

由于webpack只认识js语言，但是我们在写项目的时候又会用到其他语言，所以这个时候我们就需要loader来帮助我们，loader其实就是资源翻译模块

Loader特性

1. 链式执行
2. 支持异步执行
3. 分normal、pitch两种模式

module.exports = function( source，sourceMap?, data? ) { 
    //source 为 loader 的输入
    //可能是文件内容，也可能是上一个 loader处理结果
    return source;
};

写在结尾

其实webpack很复杂，还有许多概念都没有写在这篇笔记，包括插件之类的，我们还需要深入学习这些打包工具