介绍

本章节我们主要学习：

• loader 原理
• 自定义常用 loader
• plugin 原理
• 自定义常用 plugin

Loader 原理

loader 概念

帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。

loader 执行顺序

1. 分类

• pre： 前置 loader
• normal： 普通 loader
• inline： 内联 loader
• post： 后置 loader

2. 执行顺序

• 4 类 loader 的执行优级为：pre > normal > inline > post 。
• 相同优先级的 loader 执行顺序为：从右到左，从下到上。

例如：

// 此时loader执行顺序：loader3 - loader2 - loader1
module: {
  rules: [
    {
      test: /\\.js$/,
      loader: "loader1",
    },
    {
      test: /\\.js$/,
      loader: "loader2",
    },
    {
      test: /\\.js$/,
      loader: "loader3",
    },
  ],
},