Webpack 知识体系 | 青训营笔记

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

什么是 Webpack？

前端项目由资源组成->图片，TS,JS，less，scss 等等等 当然我们可以手动管理这些资源，但这样会引发很多问题。 依赖手工，比如有 50 个 JS 文件...操作，过程繁琐， 当代码文件之间有依赖的时候，就得严格按依赖顺序书写， 开发与生产环境一致，难以接入 TS 或 JS 新特性， 比较难接入 Less、Sass 等工具， JS、图片、csS 资源管理模型不一致。

这些都是旧时代非常突出的问题，对开发效率影响非常大，直到 Webpack 等构建工具的出现

使用 Webpack

安装

npm i -D webpack webpack-cli

编辑配置文件

const path = require("path");
module.exports = {
  entry: "./src/main.js", //入口
  output: {
    path: path.resolve(__dirname, "dist"), //__dirname来自node环境自带path包，是读取当前路径功能（这也是现在需要包管理文件的原因），resolve这个api是用于字符串拼接
    filename: "main.js", //出口
  },
};

执行编译命令

npx webpack

核心流程

1、入口处理 2、依赖解析 3、资源解析 //递归调用 2、3，直到所有资源处理完毕 4、资源合并打包

怎么使用 Webpack？

关于 Webpack 的使用方法，基本都围绕“配置”展开，而这些配置可划分为两类： 1、流程类 2、工具类

loader 是什么？

Webpack Loader 最核心的只能是实现内容转换器 —— 将各式各样的资源转化为标准 JavaScript 内容格式。 本质上是因为 Webpack 只认识符合 JavaScript 规范的文本(Webpack 5 之后增加了其它 parser)：在构建(make)阶段，解析模块内容时会调用 acorn 将文本转换为 AST 对象，进而分析代码结构，分析模块依赖；这一套逻辑对图片、json、Vue SFC 等场景就不 work 了，就需要 Loader 介入将资源转化成 Webpack 可以理解的内容形态。

理解插件

Webpack 会在启动后按照注册的顺序逐次调用插件对象的 apply 函数，同时传入编译器对象 compiler ，插件开发者可以以此为起点触达到 webpack 内部定义的任意钩子，例如：注意观察核心语句 compiler.hooks.thisCompilation.tap，其中 thisCompilation 为 tapable 仓库提供的钩子对象；tap 为订阅函数，用于注册回调。