Webpack知识体系 | 青训营笔记

何以清欢
79 阅读2分钟

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

01.什么是Webpack?

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

PNG,JPG,GIF,JS,TS,css,vUE...

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

02.使用Webpack

  1. 安装
  2. 编辑配置文件
  3. 执行编译命令

核心流程--极度简化版

  1. 入口处理
  2. 依赖解析
  3. 资源分析
  4. 资源合并打包

模块化+一致性

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

配置大致分为两类

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

使用Webpack--流程类配置

  • 输入:entry,context
  • 模块解析：resolve,externals
  • 模块转译：module
  • 后处理：optimization.mode,target

03.进阶篇：理解Loader

认识Loader:链式调用

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

认识Loader:其他特性

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

如何编写Loader

import get0ptions from'./get0ptions';
import Linter from'./Linter';
import cacheLoader from'./cacheLoader';

export default function loader(content,map){
  const options=get0ptions(this);
  const linter=new Linter(this,options);
  
  this.cacheable();
  
  //return early if cached
  if (options.cache){
    cacheLoader(linter,content,map);
    return;
  }
  
  linter.print0utput(linter.lint(content));
  this.callback(null,content,map);
}

04.进阶篇：理解插件

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

首先：插件围绕‘钩子’展开

class SomePlugin{
apply(compiler){
comiler.hooks.thisCompilation.tap('SomePlugin',(compilation)=>{})
}
}

钩子的核心信息：

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