一、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执行顺序为:从右到左,从下到上。