loader在webpack编译中起着非常重要的作用，用于模块源码的转换。例如css-loader将css代码处理成字符串，style-loader创建style标签将css代码添加到html页面中。使用自定义加载器创建一个新的节点项目，只需在src文件夹下的index.js中编写一些代码constuser={name:'alice',age:20,};创建一个loaders文件夹，在该文件夹下添加用于处理的loader的js文件，可以通过module.exports函数获取待处理文件的内容，处理后的结果会返回module.exports=函数（内容）{console.log（'ice-loader>>'，内容）；返回内容+'"@authoricecream"';};在配置文件webpack.config.js中引入自定义加载器。有两种定义加载程序的方法。通过相对路径导入（这里使用的方法），通过resolveLoader属性进行配置。默认会在node_modules中查询依赖//其他配置省略module:{rules:[{test:/\.js/i,use:['./loaders/ice-loader'],},],}，通过webpack编译文件，在控制台输出得到的文件内容，编译后的文件就是自定义加载器返回的内容。通过loader进行同步和异步loader处理的数据需要返回一个javscript字符串。返回语句的内容和this.callback函数返回的内容有两种方式。.async函数使处理过程异步。this.callback的第一个参数接收error，如果没有error则传null。其他参数与loader中的module.exports获取的相同。babel-loaderbabel-loader借助于处理js代码我们也可以很方便的实现一个叫babel的工具叫ice-babel-loader。使用babel时需要通过plugins或者presets来定义处理规则{test:/\.js/i,use:[{loader:'./loaders/ice-babel-loader',options:{presets:['@babel/preset-env'],},},],}，babel工具的核心库是@babel/core，使用定义处理规则Preset@babel/preset-env，依次安装constbabel=require('@babel/core');module.exports=function(content){constoptions=this.getOptions();//获取加载器中定义的选项constcallback=this.async();babel.transform(content,options,(err,result)=>{if(err)callback(error);callback(null,result.code);});};所以我们定义的ice-babel-loader将es6的语法转换成es5md-loaderMarkdown是一种轻量级的标记语言，可以让人们以易于读写的纯文本格式编写文档，然后将其转换成有效的XHTML（或HTML)文档。md文件可以通过loader转成html文件吗？答案是肯定的，已经有一些有用的库为我们提供了这个功能。marked用于处理markdown格式的文件，highlight.js用于对markdown文件中的代码进行样式化const{marked}=require('marked');consthljs=require('highlight.js');module.exports=function(content){//给markdown中的代码添加class属性marked.setOptions({highlight:function(code,lang){returnhljs.highlight(lang,code).value;},});常量htmlContent=标记（内容）；返回htmlContent；}；此时ice-babel-loader返回的是普通字符串，javascript代码无法识别，需要html-loader处理。{test:/\.md/i,use:['html-loader','./loaders/md-loader'],},loader处理的md文件导出为javascript字符串，所以可以加上直接去正文看效果，代码的样式显示需要导入highlight.js中的css文件//index.jsimportcodefrom'./doc.md';import'highlight.js/styles/default.css';文档。body.innerHTML=代码；这样就可以把markdown文件解析成项目中的html页面了。总结自定义加载器通过module.exports获取资源内容，经过一系列处理后返回处理后的结果。自己写的loader可以直接在本地创建文件夹处理资源。开发完成后可以发布到npm仓库，下载包直接引用loader。以上就是自定义加载器的介绍。更多关于webpack的内容可以参考我的其他博文，正在更新中~
