webpack4.0各个击破（6）—— Loader篇

webpack做为前端最火的构建工具，是前端自动化工具链最重要的部分，使用门槛较高。本系列是笔者本身的学习记录，比较基础，但愿经过问题 + 解决方式的模式，之前端构建中遇到的具体需求为出发点，学习webpack工具中相应的处理办法。（本篇中的参数配置及使用方式均基于webpack4.0版本）

一. loader综述

loader是webpack的核心概念之一，它的基本工做流是将一个文件以字符串的形式读入，对其进行语法分析及转换（或者直接在loader中引入现成的编译工具，例如sass-loader中就引入了node-sass将SCSS代码转换为CSS代码，再交由css-loader处理），而后交由下一环节进行处理，全部载入的模块最终都会通过moduleFactory处理，转成javascript能够识别和运行的代码，从而完成模块的集成。

loader支持链式调用，因此开发上须要严格遵循“单一职责”原则，即每一个loader只负责本身须要负责的事情：将输入信息进行处理，并输出为下一个loader可识别的格式。

实际开发中，不多会出现须要本身写loader来实现复杂需求的场景，若是某个扩展名的文件没法快速集成到自动化构建工具里，估计很快就会被抛弃了，你们都那么忙是吧。可是了解loader的基本原理和编译器的基本原理倒是很是有必要的。

二. 如何写一个loader

若是须要编写一个功能完整的loader，建议先到webpack的官方网站浏览一下loader有哪些API，地址：webpack官网-loader API，其中对于编写同步loader，异步loader，如何跳过loader，如何获取options配置项等等都作了很是详细的解释，本篇中再也不赘述。

假设如今要实现一个dash-loader,它的功能是加载并处理名称为*.tpl.html的文件，将其变为一个CommonJs模块。也就是说要完成一个以下的基本转换：

转换前的文本：

<div>
    <h3>这里是标题</h3>
    <p>这里是内容</p>    
</div>

转换后的文本：

var str = '<div><h3>这里是标题</h3><p>这里是内容</p></div>';
module.exports = str;

那么webpack.config.js中须要增长以下的配置:

...
module:{
    rules:[{
        test: /\.tpl\.html$/,
        use:[{
            loader:'dash-loader'
        }]
    }]
}

在项目的node_modules依赖文件夹中新建dash-loader文件夹，并在其中新建一个index.js文件，内容的基本格式为：

//index.js
module.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模块中读入的同样了。

三. loader的编译器本质

了解了loader的基本结构，那么loader里到底应该写点什么才能完成代码转换呢？这就涉及到了一个新的概念——编译器(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

【参考】

《如何编写一个loader》