Webpack 知识体系 ｜ 青训营笔记

行下星暇
77 阅读3分钟

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

一、本堂课重点内容：

Webpack定义解析

  • Webpack的本质
  • Webpack定义解析
  • Webpack优势

Webpack使用方法

  • 流程类配置
  • 处理CSS
  • 接入Bable
  • 生成HTML
  • 使用Webpack -工具线

理解Loader

  • Webpack内容识别–只认识JS
  • 使用Loader
  • 认识Loader:链式调用与其他特性
  • Loader编写
  • 常见 Loader

理解插件

  • 插件定义解析
  • 插件设计优势
  • Loader与插件的差异
  • Webpack 学习方法推荐

二、详细知识点介绍：

Webpack定义解析

1.1 Webpack的本质

前端项目由资源构成

image.png

手动可管理这些资源，但很影响开发效率

工程化工具的出现，才有了"前端工程"概念

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

image.png

1.2 Webpack定义解析

编译应对图片、TS文件等非JS文件 打包应对浏览器不支持ES模式，方便资源插入浏览器

1.3 Webpack优势

Webpack的优势在于：

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

Webpack使用方法

[核心流程]

image.png
  1. 入口处理
  • 从'entry'文件开始'，启动编译流程
  1. 依赖解析
  • 从'entry文件开始，根据'require' or 'import'等语句找到依赖资源
  1. 资源解析
  • 根据'module'配置,调用资源转移器，将png、css等非标准JS资源转译为JS内容
  1. 资源合并打包
  • 将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
image.png

[模块化-一致性]

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

[使用Webpack]

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

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

2.1 流程类配置

image.png

输入∶

  • entry
  • context

模块解析∶

  • `resolveT
  • externals

包模块转译∶

  • module

后处理:

  • optimization
  • mode
  • target
image.png

按使用频率:

  • entry/output
  • module/plugins
  • mode
  • watch/devServer/devtool
  1. 声明入entry
  2. 声明产物出口output
  3. 运行 npx webpack

2.2 处理CSS

image.png image.png

2.3 接入Bable

  1. 安装依赖
  2. 声明产物出口output
  3. 执行npx webpack

2.4 生成HTML

image.png image.png

2.5 使用Webpack - 工具线

image.png

Hot Module Replacement--模块热替换

image.png

[HMR]

image.png image.png

[Tree-Shaking]

image.png

Dead Code

  • 代码没有被用到，不可到达
  • 代码的执行结果不会被用到
  • 代码只读不写
  • ...

Tree-Shaking

  • 模块导出了，但未被其它模块使用
image.png

开启tree-shaking :

  • mode:“production”
  • optimization.usedExports: true

PS ∶对工具类库如Lodash有奇效

其它工具:

  • 缓存
  • Sourcemap
  • 性能监控
  • 日志
  • 代码压缩
  • 分包
  • ...

理解Loader

3.1 Webpack内容识别–只认识JS

image.png

为了处理非标准JS资源，设计出资源翻译模块——Loader用于将资源翻译为标准JS

3.2 使用Loader

image.png

3.3 认识Loader:链式调用与其他特性

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

[其它特性]

image.png

特点︰

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

3.4 Loader编写

image.png image.png

3.5 常见 Loader

image.png

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

4.理解插件

4.1. 插件定义解析

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

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

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

image.png

4.2 插件设计优势

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

4.3 Loader与插件的差异

钩子的核心信息∶

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

4.4 Webpack 学习方法推荐

  1. 入门应用
  • 理解打包流程
  • 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成 Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的 Webpack 环境
  • 掌握常见脚手架工具的用法，例如:Vue-cli、create-react-app、@angular/cli
  1. 进阶
  • 理解 Loader、Plugin机制,能够自行开发Webpack 组件
  • 理解常见性能优化手段，并能用于解决实际问题
  • 理解前端工程化概念与生态现状
  1. 大师级 阅读源码，理解 Webpack编译、打包原理，甚至能够参与共建
image.png

三、实践练习例子：

接入Bable

index.js

class Person {
   constructor() {
       this.name = 'Tecvan'
       }
}
console.log((new Person()).name)
const say = ()=>{}


const path = require( "path" );
module.exports = {
   entry: "./src/index",
   output: {
     filename: "[name].js"，
     path: path.join( __dirname，"./dist" ),
   },
   module: {
     rules: [{
     test: /\.js?$/,
     use: [{
        loader: ' babel-loader' ,
        options: {
          presets:[
          [
             '@babel/preset-env'
          ]
        ]
        }
       }, ]
      }],
    },
  };

四、课后个人总结：

通过本章Webpack知识体系的学习，难点在于区别loader和插件；在本章节中，我清楚了Webpack的定义和功能，以及Webpack的使用方法，也知道了解了loader和插件，

avatar
文章
阅读
粉丝