如何创建一个webpack loader

April 发布于2019-06-24 17:48 / 434人阅读

摘要：在目前的开源市场，前端架构中最火热的项目非莫属了。在使用的过程中，我们会用到各式各样的，毫无疑问，因为机制的存在让拥有了无限的可能性，让几乎可以容纳一切前端需要的资源。

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

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

首先
你需要知道如何调试你本地的loader，幸运的是，不管是在webpack.config.js中写相对路径还是直接require("./loader-name!")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，不然的话很容易出现内容不更新等情况

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/11727.html

Webpack入门到精通（1）

前言什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack 有哪些功能(代码转换文件优化代码分割模块合并 ...

SunZhaopeng 2019-05-23 17:29 评论0 收藏0
Webpack入门到精通（1）

前言什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。webpack 有哪些功能(代码转换文件优化代码分割模块合并自...

wangbinke 2019-08-26 13:52 评论0 收藏0
使用 webpack 4 和 Babel 7 构建 React 应用及如何引入 Material D

摘要：建立项目首先，创建工程目录现在我们已经创建了我们要开发应用程序的文件夹，接着需要添加一个文件。这里为了版本的一致性，我把里的版本号前面删除了。为此，需要创建一个名为的文件，用来配置。 showImg(https://segmentfault.com/img/bVboiHi?w=1000&h=625); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！在过去的一年和...

asoren 2019-08-23 15:17 评论0 收藏0
webpack初探

摘要：我们还想要的颜色我们通过下面命令行可以做到观察模式我们不想每一次项目变化都要手动编译可以缓存两次编译之间没有变化的模块和输出文件。开发服务器使用开发服务器开发体验会更好这将在本地启动一个端口的服务，指向静态文件以及自动编译。原文英文版来自webpack官网 demo代码本文地址欢迎浏览这是一篇通过一个小例子给你介绍webpack的文章你可以通过这篇文章了解到：如...

soasme 2019-08-19 17:12 评论0 收藏0
webpack初探

摘要：我们还想要的颜色我们通过下面命令行可以做到观察模式我们不想每一次项目变化都要手动编译可以缓存两次编译之间没有变化的模块和输出文件。开发服务器使用开发服务器开发体验会更好这将在本地启动一个端口的服务，指向静态文件以及自动编译。原文英文版来自webpack官网 demo代码本文地址欢迎浏览这是一篇通过一个小例子给你介绍webpack的文章你可以通过这篇文章了解到：如...

Lavender 2019-08-28 18:27 评论0 收藏0