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执行顺序为：从右到左，从下到上。