配置的loader也可以改为
module:{
rules:[
{
test:/\.js/,
use:[
{
loader:path.resolve(__dirname,"./loaders/replaceLoader.js"),
options:{
name:'lee'
}
},
{
}
]
//使用自己定义的loader
}
]
}
}
//通过query就可以拿到name是lee的数据,replaceLoader.js中的内容
module.exports=function(source/*引入的源代码*/){
return source.replace('dell',this.query.name)//把替换的内容改为loader中定义的内容
}
编写loader的官网:https://webpack.js.org/api/loader/
//我们自己编写loader,官方提供了loader-util ,帮助我们编写loader
//安装命令
npm i loader-utils --save-dev
// replaceLoader.js中的内容
//引入loader-utils
const loaderUtils= require('loader-utils');
module.exports=function(source/*引入的源代码*/){
//使用引入的loader
const options = loaderUtils.getOptions(this)//自动帮我们分析this.query
return source.replace('dell',options.name)//把替换的内容改为loader中定义的内容
}
//可以打包运行测试 npm run build
//replaceLoader.js中新配置
使用this.callback,把sourceMap带出去。
this.callback(
err:error|null,
content:string|Buffer,
sourceMap?:SourceMap,
meta?:any
)
module.exports=function(source/*引入的源代码*/){
//使用引入的loader
const options = loaderUtils.getOptions(this)//自动帮我们分析this.query
//替换这一部分内容 return source.replace('dell',options.name)//把替换的内容改为loader中定义的内容
this.callback(null,result)//等价于return,要传递源代码出去,return就不好用了,要用calback
}
异步操作的使用
使用 async
const calback=this.async();//再replaceLoader.js中使用异步要用
callback(null,/*返回的结果*/)//可以返回多个
//replaceLoader.js中新配置
const loaderUtils=require("loader-utils");
module.exports=function(source){
const options=loaderUtils.getOptiions(this)
const callback=this.async();
setTimeout(()=>{
const result=source.replace('dell',options.name);
calback(null,result);
},1000)
}
//使用异步操作之后打包。 npm run build
//replaceLoader.js中新配置
const loaderUtils=require("loader-utils");
module.exports=function(source){
return source.replace('lee','world');
}
//使用多个loader
配置的loader也可以改为
//replaceLoader.js中新配置
const loaderUtils=require("loader-utils");
module.exports=function(source){
const options=loaderUtils.getOptiions(this)
const callback=this.async();
setTimeout(()=>{
const result=source.replace('dell',options.name);
calback(null,result);
},1000)
}
module:{
rules:[
{
test:/\.js/,
use:[
{
loader:path.resolve(__dirname,"./loaders/replaceLoader.js"),
options:{
name:'lee'
}
},
path.resolve(__dirname,'./loaders/replaceLoaderAsync.js')
{
}
]
//使用自己定义的loader
}
]
}
}