webpack中resolveLoader的使用方法
2022-05-10 本文已影响0人
_静夜听雨_
第一种:通过npm包安装的loader
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
}
]
},
直接写loader名称可以找到对应的loader
第二种:自己写loader,可以使用绝对路径的方式
module: {
rules: [
{
test: /\.js$/,
use: path.resolve(__dirname, 'loaders/babel-loader.js'),
exclude: /node_modules/
}
]
},
自己的loader放在当前目录的loaders文件夹中的babel-loader.js文件
第三种:自己写loader,使用绝对路径,配置别名
resolveLoader: {
alias: {
'babel-loader': path.resolve(__dirname, 'loaders/babel-loader.js')
}
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
}
]
},
第四种:通过loader的查找方式来定义,loader默认会在node_modules查找,也可以指定其他的目录,来查找我们自定义的loader
resolveLoader: {
modules: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'loaders')]
},
module: {
rules: [
{
test: /\.js$/,
use: 'myLoaderName',
exclude: /node_modules/
}
]
},
第五种:node_modules替换为自己的loader文件夹
resolveLoader: {
modules: ["./node_modules", "./loaders"],
},