webpack 知识体系|青训营笔记

星星Star98
97 阅读3分钟

webpack 知识体系

这是我参与「第四届青训营」笔记创作活动的第10天

什么是Webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载,通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

前端项目由资源构成

  • 可以手动管理这些资源，但有以下几个对开发效率影响非常大的缺点：

    • 依赖手工，比如有50个JS文件……操作过程繁琐
    • 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
    • 开发与生产环境一致，难以接入TS或JS新特性
    • 比较难接入Less、Sass等工具
    • JS、 图片、CSS资源管理模型不一致

  • 因此，出现了很多前端工程化工具

image.png

  • 特别是Webpack

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

  • 多份资源文件打包成一个Bundle

  • 支持

    • Babel、Eslint、 TS、 CoffeScript、Less、 Sass

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

  • 支持 HMR + 开发服务器

  • 支持持续监听、持续构建

  • 支持代码分离

  • 支持 Tree-shaking

  • 支持 Sourcemap

Webpack打包

核心流程

  • 从entry中的入口文件开始启动编译
  • 依赖解析：根据require 或者 import 等语句找到以来资源
  • 根据module 配置，调用资源转移器将非JS资源编译为JS内容，直至所有资源处理完毕
  • 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

Webpack 本质上完成的事情：模块化 + 一致性

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

webpack 使用方法

  • 关于 Webpack的使用方法，基本都围绕配置展开，而这些配置大致可划分为两类:

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

理解Loader（进阶）

Loader核心功能：将非JS资源转换为JS资源

认识Loader

  • 链式调用

    • less-loader: 实现less => css的转换
    • css-loader: 实现css => js的转换，将CSS包装成类似module.exports = “${css}” 的内容，包装后的内容符合JavaScript 语法
    • style-loader：将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签

  • 其他特性

    • 链式执行
    • 支持异步执行
    • 分normal、pitch两种模式

  • 常用Loader

image.png

理解插件Plugin

什么是插件

  • 插件可以提升整个应用的拓展性

如何编写插件

  • 首先：插件围绕 钩子 展开

  • 钩子

    • 时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情；
    • 上下文：通过tapable提供的回调机制，以参数方式传递上下文信息;
    • 交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变
avatar
文章
阅读
粉丝