帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。
了解执行顺序之前,需要先了解loader的分类
执行顺序
pre > normal > inline > post
。从右到左,从下到上
。 // 此时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其实就是一个函数,接收下面三个参数
content
源文件的内容map
SourceMap 数据meta
数据,可以是任何内容最后返回处理后的内容。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。