1.加载器概述加载器是webpack的核心概念之一，它的基本工作流程是读取一个字符串形式的文件，解析并转换（或直接在loader中引入现成的编译工具，例如在sass-loader中引入node-sass将SCSS代码转为CSS代码，然后交给css-loader处理），再交给下一个环节对于处理，所有加载的模块最终都会被moduleFactory处理，转换成javascript可以识别和运行的代码，从而完成模块集成。loader支持链式调用，所以开发需要严格遵循“单一职责”原则，即每个loader只负责自己需要负责的事情：处理输入的信息并输出为下一个可以使用的格式loader可以识别。在实际开发中，很少有场景需要自己编写loader来满足复杂的需求。如果某个扩展名的文件不能快速集成到自动化构建工具中，估计很快就会被废弃。每个人都很忙，对吧？.但是了解加载器和编译器的基本原理是非常有必要的。2、如何写loader如果需要写一个功能齐全的loader，建议去webpack官网浏览一下loader有哪些API，如何获取options配置项等已经有很详细的讲解，本文不再赘述。假设现在要实现一个dash-loader，它的功能是加载并处理一个名为*.tpl.html的文件，并将其变成一个CommonJs模块。也就是说，完成一个基本的转换如下：转换前的文本：
转换后的文本：varstr='
';module.exports=str;那么webpack.config.js需要添加以下配置：...module:{rules:[{test:/\.tpl\.html$/,use:[{loader:'dash-loader'}]}]}在node_modules中创建一个新的dash-loader项目文件夹的dependency文件夹，并在里面新建一个index.js文件，内容的基本格式为：//index.jsmodule.exports=function(source){vartpl="";source.split(/\r?\n/).forEach(function(line){line=line.trim();if(!line.length){return;}//处理线...tpl+=line;});返回"vartpl=\'"+tpl+"\'\nmodule.exports=tpl";最后，dash-loader返回的数据似乎是从CommonJs模块中读取的。3、加载器编译器的本质了解了加载器的基本结构后，加载器中应该写些什么来完成代码转换呢？这就涉及到一个新的概念——编译器（Compiler）。一个基本的编译器需要经过tokenize、parse、transform、stringify几个核心步骤。它的应用非常广泛，比如SPA中virtual-DOM的分析，babel中ES6语法的分析等，babel官网曾经是我推荐的一个很好的开源项目（10k+Star），其中详细描述了如何逐步实现编译器。建议有兴趣的同学可以自行学习：【The-Super-Tiny-Compiler】——https://github.com/jamiebuilds/the-super-tiny-compiler作者最近看了一本书《你不知道的javascript》，发现那第一节讲的是基本的编译原理，没错，就是你每天使用的javascript编译过程，和上面说的都一样，你想学吗？【参考】《如何编写一个loader》
