Webpack 知识体系 | 青训营笔记

画一个圆
48 阅读5分钟

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

Webpack定义解析

为什么要学习Webpack

  • 理解前端 "工程化" 概念、工具、目标
  • 一个团队总要有那么几个人熟悉Webpack，某种成都上可以成为个人的核心竞争力
  • 高阶前端必经之路

什么是Webpack

前端项目由什么构成 --资源

HTML、CSS、JS、TS、PNG、JPG、GIF、WEBP、Less、Vue、JSX、Sass等等

09年之前需要手动管理这些资源

缺点：

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

直到出现了很多工程化工具

  • Webpack
  • Vite
  • rollup
  • browserify
  • Gulp
  • Require
  • ...

Webpack是什么---本质上是一种前端资源编译、打包工具

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

Webpack 打包核心流程

示例

安装

npm i -D webpack webpack-cli

编辑配置文件

// webpack.config.js

module.exports = {
    entry: 'main.js',
    output: {
        filename: "[name].js",
        path: path.join(__dirname, './dist')
    },
    module: {
        rules: [{
            test: /\.less%/i,
            use: ['style-loader', 'css-loader', 'less-loader']
        }]
    }
}

执行编译命令

npx webpack

核心流程---极度简化版

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

怎么使用Webpack

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

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

流程类配置

Entry => Dependencies Lookup => Transform => Bundle => Output

使用webpack

处理CSS

  • 关键配置项介绍

Loader 组件

  • Loader有什么作用，为什么需要用到 css-loader、style-loader
  • 与旧时代---在HTML文件中维护css相比，这种方式会有什么优劣性？
  • webpack中如何接入 less、sass、stylus这一类css预编译框架

参考资料： css-loader Webpack 原理系列七：如何编写loader style-loader

接入Babel

  • babel具体有什么功能
  • babel与Webpack分别解决了什么问题？为何两者能协作到一起

参考资料：

高版本代码转化为低版本代码

工具线

HMR

Hot Module Replacement---模块热替换

Webpack 原理系列十：HMR 原理全解析

Plugin 组件

生成HTML

  • 相比于手工维护HTML内容，这种自动生成的方式有什么优缺点

参考资料

Tree-Shaking

树摇---用于删除Dead Code

其他工具

  • 除了上面提到的内容，还有哪些配置可划分为 '流程类'配置
  • 工具类配置具体有什么作用？ 包括'devtool/cache/stat'等

如何学习Webpack

  • 入门级：学会灵活应用
  • 进阶：学会扩展Webpack
  • 大师：源码级理解 Webpack打包编译原理

survivejs-webpack book 深入浅出 Webpack

理解Loader--内容转化

问题：webpack只认识JS---非JS资源转化为JS资源

使用loader

认识loader：链式调用

认识loader：其他特性

参考：Webpack 原理系列七：如何编写loader

如何编写loader

常见loader

站在使用角度，建议掌握这些常见loader的功能、配置方法

理解插件

思考题：

  • loader输入是什么 要求的输出是什么
  • loader的链式调用是什么意思 如何串连多个loader
  • loader中如何处理异步场景

插件是什么 为什么这么设计

很多知名工具，如：

  • Vscode、WebStorm、Chrome、Firefox
  • Babel、Webpack、Rollup、Eslint
  • Vue、Redux、Quill、Axios
  • 等等都设计了所谓的"插件"架构 为什么？

这是一个特别复杂的过程，那么：

  • 新人需要了解整个流程细节，上手成本高
  • 功能迭代成本搞，牵一发动全身
  • 功能僵化，作为开源项目而言缺乏成长性
  • Blabla

心智成本高 => 可维护性低 => 生命力弱

插件架构精髓：对扩展开放，对修改封闭

甚至，webpack本身的很多功能也是基于插件实现的

理解插件

首先：插件围绕钩子展开

class SomePlugin {
    apply(compiler) {
        // 这是一个钩子
        compiler.hooks.thisCompilation.tap('SomePlugin', (compilation) => {
        })
    }
}

这里侧重讲 钩子 的作用，重在：在编译的某个环节触发钩子，某种程度上可以理解为 —— 事件

钩子的核心信息：

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

时机：compier.hoos.compilation 参数：compilation等 交互：dependencyFactories.set

思考：

  • loader与插件有什么区同点
  • ‘钩子’有什么作用 如何监听钩子函数

参考： webpack插件架构深度讲解 万字总结 一文吃透 webpack 核心原理

小结：

  • webpack的作用
  • 理解webpack配置结构，学习关键配置项
  • loader的作用与常用loader
  • 插件基本形态与作用

webpack5知识体系

如何学习Webpack

  • 入门应用
    • 理解打包流程
    • 熟练掌握常用配置项、loader、插件的使用方法、能够灵活搭建集成vue、react、babel、eslint、less、sass、图片处理等工具的webpack环境
    • 掌握常见脚手架工具的用法，例如：vue-cli、create-react-app、@angular/cli
  • 进阶
    • 理解loader、plugin机制，能够字型开发webpack组件
    • 理解常见性能优化手段，并能用于解决实际问题
    • 理解前端工程化概念与生态优化
  • 大师级
    • 阅读源码，理解webpack编译、打包原理，甚至能够参与共建
avatar
文章
阅读
粉丝