关于webpack: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 数据，能够是任何内容

最初返回解决后的内容。