webpack5原理loader概述
Posted 天界程序员
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack5原理loader概述相关的知识,希望对你有一定的参考价值。
简介
loader
其实是一个函数,用来帮助 webpack
将不同类型的文件转换为 webpack
可识别的模块。
loader的分类以及执行顺序
1、分类
pre
:前置loader
normal
:普通loader
inline
:内联loader
post
:后置loader
2、执行顺序
- 各个种类的
loader
的执行优先级:pre > normal > inline > post
- 相同种类优先级的
loader
执行优先级:从右到左,从下到上
示例1:标明loader
种类时的执行顺序
// 此时loader执行顺序:loader1 - loader2 - loader3
module:
rules: [
enforce: "pre",
test: /\\.js$/,
loader: "loader1",
,
// 没有enforce就是normal
test: /\\.js$/,
loader: "loader2",
,
enforce: "post",
test: /\\.js$/,
loader: "loader3",
,
],
,
示例2:loader
在同一种类时的执行顺序(此时都是normal
)
// 此时loader执行顺序:loader3 - loader2 - loader1
module:
rules: [
test: /\\.js$/,
loader: "loader1",
,
test: /\\.js$/,
loader: "loader2",
,
test: /\\.js$/,
loader: "loader3",
,
],
,
3、使用loader的方式
- 配置方式:在
webpack.config.js
文件中指定loader
,显示的配置loader
种类以及顺序【pre、normal、post】。 - 内联方式:在每个
import
语句中显示指定loader
名称,通过特殊符号指定执行顺序【inline】。
4、内联loader(inline-loader)
用法示例:import Styles from 'style-loader!css-loader?modules!./styles.css';
代表的含义:
-
使用
css-loader
和style-loader
处理styles.css
文件 -
通过
!
将资源中的loader
分开
inline loader
可以通过添加不同前缀,跳过其他类型 loader
。
1、!
跳过 normal loader
import Styles from '!style-loader!css-loader?modules!./styles.css'
;
2、-!
跳过 pre loader
和 normal loader
。
import Styles from '-!style-loader!css-loader?modules!./styles.css'
;
3、!!
跳过 pre loader、 normal loader
和 post loader
import Styles from '!!style-loader!css-loader?modules!./styles.css'
;
以上是关于webpack5原理loader概述的主要内容,如果未能解决你的问题,请参考以下文章