第二十一章 webpack5原理loader概述

简介

loader其实是一个函数，用来帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。

loader的分类以及执行顺序

1、分类

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

2、执行顺序

• 各个种类的loader的执行优先级：pre > normal > inline > post
• 相同种类优先级的loader执行优先级：从右到左，从下到上

示例1：标明loader种类时的执行顺序

// 此时loader执行顺序：loader1 - loader2 - loader3
module: {
  rules: [
    {
      enforce: "pre",
      test: /\.js$/,
      loader: "loader1",
    },
    {
      // 没有enforce就是normal
      test: /\.js$/,
      loader: "loader2",
    },
    {
      enforce: "post",
      test: /\.js$/,
      loader: "loader3",
    },
  ],
},

示例2：loader在同一种类时的执行顺序(此时都是normal)

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

3、使用loader的方式

• 配置方式：在webpack.config.js 文件中指定loader，显示的配置loader种类以及顺序【pre、normal、post】。
• 内联方式：在每个import语句中显示指定loader名称，通过特殊符号指定执行顺序【inline】。

4、内联loader（inline-loader）

用法示例：import Styles from 'style-loader!css-loader?modules!./styles.css';

代表的含义：

• 使用 css-loader 和 style-loader 处理 styles.css 文件
• 通过 ! 将资源中的 loader 分开

inline loader 可以通过添加不同前缀，跳过其他类型 loader。

1、! 跳过 normal loader

import Styles from '!style-loader!css-loader?modules!./styles.css';

2、-! 跳过 pre loader 和 normal loader。

import Styles from '-!style-loader!css-loader?modules!./styles.css';

3、!! 跳过 pre loader、 normal loader 和 post loader

import Styles from '!!style-loader!css-loader?modules!./styles.css';