loader原理

loader 概念

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

loader 执行顺序

了解执行顺序之前，需要先了解loader的分类

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

执行顺序

  • 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",
        },
      ],
    }
复制代码
// 此时loader执行顺序：loader1 - loader2 - loader3
    module: {
      rules: [
        {
          enforce: "pre",
          test: /.js$/,
          loader: "loader1",
        },
        {
          // 没有enforce就是normal
          test: /.js$/,
          loader: "loader2",
        },
        {
          enforce: "post",
          test: /.js$/,
          loader: "loader3",
        },
      ],
    }
复制代码

使用 loader 的方式

  • 配置方式：在​​webpack.config.js​​ 文件中指定 loader。（pre、normal、post loader）
  • 内联方式：在每个​​import​​ 语句中显式指定 loader。（inline loader）

inline loader

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

含义：

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

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

  • ​​!​​ 跳过 normal loader。

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

  • ​​-!​​ 跳过 pre 和 normal loader。

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

  • ​​!!​​ 跳过 pre、 normal 和 post loader。

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

编写loader

loader其实就是一个函数，接收下面三个参数

  • ​​content​​ 源文件的内容
  • ​​map​​ SourceMap 数据
  • ​​meta​​ 数据，可以是任何内容

最后返回处理后的内容。

webpack原理分析_执行顺序