webpack原理分析

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 数据，可以是任何内容

最后返回处理后的内容。