青训营笔记9.3——理解 Loader

Eren7Y琳
145 阅读2分钟

🎯课程表

📋前言

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

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

📑课程介绍

  • 有关 Webpack 的讲解，除了使用与配置之外，还有重要的知识则是 Webpack 的扩展方式，在对基础的概念、本质、使用讲解完成后，本节课主要解读 Webpack 的扩展方式之一 - Loader 。

🔥课程重点

  1. Webpack 内容识别 - 只认识 JS
  2. 使用 Loader
  3. 认识 Loader ：链式调用与其他特性
  4. Loader 编写
  5. 常见 Loader

主要内容:

什么是 Webpack

Webpack 打包核心流程

  • 示例
  • Entry => Dependencies Lookup => Transform => Bundle => Output
  • 关键配置项介绍
  • Loader 组件
  • Plugin 组件
  • 如何学习 Webpack
  • 入门级: 学会灵活应用
  • 进阶: 学会扩展 Webpack
  • 大师: 源码级理解 Webpack 打包编译原理

📝具体笔记

063d115eeb72c34d6a212694aacc7b6.png

fc5d1a6caeeb53b940fbe58e859bde4.png

什么是webpack

webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

b1ed505594f82ef3c5adb298db2e81f.png

159cf3fa8f876b5787e00e6be250ebc.png

9ce07d55d9f6ee4139fb07484407a0f.png

6c03a419dfe061bceb6c29ee4b19bd9.png 本质上是一种前端资源编译、打包工具

  • 多份资源文件打包成一个 Bundle
  • 支持 Babel、Eslint、TS、CoffeScript、Less、Sass
  • 支持模块化处理 css、图片等资源文件
  • 支持 HMR + 开发服务器
  • 支持持续监听、持续构建
  • 支持代码分离
  • 支持 Tree-shaking
  • 支持 Sourcemap 327d6822a5b0547a8bc8c71cd296ccd.png

使用webpack

image.png

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

支持模块化开发

支持高级 JS

支持 Typescript、CoffeeScript 方言

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

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

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

fd5dacb474fedc77658169a7e4c2388.png

ae00cfd8f7e89e22b2e89e5f5690d37.png

处理css

8af39f42989b459cc71bec1644326ab.png

88e60e8c93cb37070b23c5031e02c54.png

接入babel

24a26c9394ee2a2ce336458b13c35eb.png

d3a052c2f11671e3ed5569729f16023.png

生成html

eb9cbe4c492cab75c7038d841e61487.png

eeb00379c815886e8eb27ccffd5c149.png

05ef11fd1d201aa0d2ef5e0079c57e6.png

处理HMR

1dc12fe6f2cd5d6b654117da0b6dd9a.png

使用Tree-Shaking

5eb591dba479c08cdee785edef38d68.png

2893f86cc8f088a2dfcfcfa941e7b9d.png

5ba4fe999fc812bd330cbbd39f069b3.png

理解loader

e8baebfac80b8d1adb6c5a4d32ed2e6.png

d625528083591468bc07ce7d9fe28fa.png

less-loader：实现 less => css 的转换

css-loader：将 CSS 包装成类似 module.exports ="$css]”的内容，包装后的内容符合 JavaScript 语法

style-loader：将 css 模块包进 require 语句，并在运行时调用 injectStyle 等函数将内容注入到页面的 style 标签

2df35eebed6037c51abcbd199945ac3.png

1cd3290c6de3a12cf97867fecf7af8a.png

d352c654fdc5fd6122bd136c0199de3.png

9465b095e11e2df0d1d8e04933d6d72.png

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

avatar
文章
阅读
粉丝