Webpack配置原理

一、Loader：

1、定义：

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

2、分类：

① pre： 前置 loader

（1）配置：

在 webpack 配置文件中通过enforce进行指定 loader的优先级配置

（2）代码示例：

module: {
  rules: [
    {
      enforce: "pre",
      test: /\.js$/,
      loader: "loader1",
    }
  ]
}

② normal： 普通 loader

默认值

③ inline： 内联 loader

（1）配置：

• 在每个 import 语句中显式指定 loader
• 多个loader之间用 ! 进行分隔
• loader后使用?进行loader参数的传递

（2）代码示例：

import Styles from 'loader1!loader2?params!./styles.css';

（3）添加不同前缀，跳过其他类型 loader：

a、! 跳过 normal loader：

import Styles from '!loader1!loader2?params!./styles.css';

b、-! 跳过 pre 和 normal loader：

import Styles from '-!loader1!loader2?params!./styles.css';

c、!! 跳过 pre、 normal 和 post loader：

import Styles from '!!loader1!loader2?params!./styles.css';

④ post： 后置 loader

（1）配置：

在 webpack 配置文件中通过enforce进行指定 loader的优先级配置

（2）代码示例：

module: {
  rules: [
    {
      enforce: "post",
      test: /\.js$/,
      loader: "loader2",
    }
  ]
}

3、执行顺序： pre > normal > inline > post

相同优先级的 loader 执行顺序为：从右到左，从下到上。

二、Plugin：