如何建立一个webpack loader

在目前的开源市场，前端架构中最火热的项目非webpack莫属了。在使用webpack的过程当中，咱们会用到各式各样的loader，毫无疑问，由于loader机制的存在让webpack拥有了无限的可能性，让webpack几乎能够容纳一切前端须要的资源。同时合理得利用loader也有助于咱们在架构项目的时候省去不少重复工做，今天咱们就来说讲如何建立一个webpack的loader

在最开始想到要写loader的时候，其实我是拒绝的，由于webpack主要的功能是处理依赖以及编译，一提到编译我就头疼，各类字符串处理能让我上天。然而进一步了解以后我发现我想多了，大部分的时候编译的工做并不须要你来作，很少讲，看代码。

首先
你须要知道如何调试你本地的loader，幸运的是，无论是在webpack.config.js中写相对路径仍是直接require('./loader-name!<file path>')webpack都是能够访问到咱们的本地loader的，因此这点无需担忧

其次
一个loader就是一个方法，这个方法接受一个source参数包括指定文件的内容，this包含了不少webpack的方法和属性供调用，该方法须要将你处理以后的内容返回，若是有sourcemap，也能够一并将sourcemap返回，这个时候须要调用this.callback(null, source, map)，第一个null表明没有错误，若是有错误的话就是一个Error对象

因此
一个loader大体长成这样

module.exports = function (source) {
    if (cacheable) this.cacheable()
    
    // do something about the source
    
    return dealedSource // 返回处理过的source
    // this.callback(null, dealedSource, map) // 若是有sourcemap
    
}

记住cacheable那一步必需要执行，一方面他能够提升webpack除第一次以外的编译熟读，再次若是有cacheable官方推荐是必须cacheable的，实践状况也是不执行的话会有奇葩错误，这点上由于webpack了解不深，同时也没有相关文档，因此不是很了解清楚（你知道webpack的源码多大么!!!!!）

而后
其实该讲的就已经讲完了。。。由于loader里面的处理逻辑是根据你的实际状况来的，这没什么好说的，好比less-loader里面就是调用了less把source处理一下而后return出去，因此想到什么的朋友应该已经能够动手写本身的loader了

好吧，再说点什么
在我遇到状况中，我须要在vue-loader以前作一些特定操做（经过demo生成文档），因此我先去研究了一下vue-loader的源码。vue-loader的操做逻辑我会从新起一片文章讲，到时候我再贴过来，我只想抱怨一下vue-loader真是一个大坑，由于vue-loader实际上调用两次文件的source，因此你在vue-loader以前对source作的任何操做都是没什么卵用，我了一整晚/(ㄒoㄒ)/~~

吐槽来了，点这里

但在这种状况下，仍是有办法处理，只是感受有点hacker，并非那么好，因此webpack得loader仍是能够发挥你的不少想象力的。就酱，回家吃饭~~~

--------------- 4-15日补充 ----------------发现一个重点，那就是若是你的loader处理的文件有依赖于别的文件，你必须在loader里面生命Dependency，否则的话很容易出现内容不更新等状况