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

最后返回处理后的内容。