webpack 作为最流行的后端重构工具，是后端自动化工具链中最重要的一环，使用门槛也比较高。 这个系列是作者自己的学习记录，比较基础。 希望通过问题+解决方案的模式，从后端建立中遇到的具体需求出发，学习webpack工具中相应的处理方法。 （本文参数配置及使用方法基于webpack4.0版本）
1. 装载机概述
Loader是webpack的核心概念之一。 它的基本工作流程是读取一个文件作为字符串，分析并转换成句型（或者直接在loader中引入现成的编译工具，比如 sass-loader ，引入node-sass将SCSS代码转换为CSS代码，以及然后交给css-loader进行处理），然后交给下一个环节进行处理，所有加载的模块最终都会经过moduleFactory的处理，转换成javascript进行识别和运行的代码前端开发webpack，完成模块的集成。
加载器支持链式调用，因此开发时必须严格遵守“单一责任”原则，即每个加载器只负责自己需要负责的事情：处理输入信息并输出为加载器可识别的格式下一个装载机。
在实际开发中，很少有需要自己编写loader来满足复杂需求的场景。 如果某个扩展名的文件很难快速融入到自动重构工具中，估计很快就会被抛弃。 大家都很忙吧？ 。 但尤其有必要了解加载器和编译器的基本原理。
2.如何编写加载器
如果需要编译一个功能齐全的loader，建议去webpack官网浏览一下loader有哪些API前端开发webpack，地址：webpack官网-loader API，其中，用于编译同步loader和异步loader 、如何跳过loader、如何获取options配置项等都做了特别详细的讲解，本文不再赘述。
假设现在要实现一个dash-loader，它的功能是加载并处理一个名为*.tpl.html的文件，并将其转换为CommonJs模块。 也就是说，完成一个基本的转换如下：
转换前的文本：
这里是标题
这里是内容
转换后的文本：
var str = '';module.exports = str;这里是标题
这里是内容
那么webpack.config.js中需要减少以下配置：
...
module:{ rules:[{ test: /.tpl.html$/, use:[{ loader:'dash-loader'
}]
}]
}
在项目的node_modules依赖文件夹中新建dash-loader文件夹，并在其中新建index.js文件。 内容的基本格式是：
//index.jsmodule.exports = function(source){ var tpl="";
source.split(/r?n/).forEach(function(line){
line=line.trim(); if(!line.length){ return;
} //对line进行处理...
tpl+=line;
}); return "var tpl='" + tpl + "'nmodule.exports = tpl";
}
最后，dash-loader 返回的数据似乎是从 CommonJs 模块读取的。
3.loader的编译本质
了解了加载器的基本结构后，加载器中应该写些什么来完成代码转换呢？ 这就涉及到一个新的概念——编译器（Compiler）。 一个基本的编译器需要经历分词、解析、转换和字符串化几个核心步骤。 它的应用非常广泛，比如SPA中virtual-DOM的分析，babel中ES6句型的分析等等，babel官网之前推荐过一个非常好的开源项目（10k+Star），以及详细描述了如何一步步实现编译器。 建议有兴趣的朋友可以自行学习。
