青训营笔记9.2——Webpack 使用方法

🎯课程表

📋前言

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

第五届字节跳动青训营的课程已经进入尾声了，继续保持上课的节奏和学习，需要要学习内容较多，因此分为几个部分来学习，今天的内容是学习 Webpack 使用方法的内容，通过该篇文章记录在课程中学到的知识以及重点，对此做相对应的笔记来巩固学习。

📑课程介绍

• 在介绍完 Webpack 是什么之后，本节课将主要带来 Webpack 的使用方法，帮助同学从理论到实践，能够通过代码展示与案例讲解，了解关于 Webpack 的具体使用方法。

🔥课程重点

1. 流程类配置
2. 处理 CSS
3. 接入 Bable
4. 生成 HTML
5. 使用 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

使用webpack

多个文件资源合并成一个，减少 http 请求数

支持模块化开发

支持高级 JS

支持 Typescript、CoffeeScript 方言

统一图片、CSS、字体 等其它资源的处理模型 关于 Webpack 的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类:

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

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

处理css

接入babel

生成html

处理HMR

使用Tree-Shaking

文章仅为个人学习笔记，如有错误，欢迎指正。