编写自己的Webpack Loader

摘要：本文将简单介绍，以及如何去编写一个来满足自身的需求，从而也能提高对的认识与使用，努力进阶为配置工程师。用于对模块的源代码进行转换。在我们使用它们前，我们得知道自己需要什么。另外，还需要考虑一些异常的处理，如模板文件找不到。

本文将简单介绍webpack loader，以及如何去编写一个loader来满足自身的需求，从而也能提高对webpack的认识与使用，努力进阶为webpack配置工程师。

webpack想必前端圈的人都知道了，大多数人也都或多或少的用过。简单的说就是它能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中。可以说，它作为一个打包工具，在前端工程化浪潮中，起到了中流砥柱的作用。

那webpack其中非常重要的一环就是，能够对加载的资源文件，进行一些处理。比如把less、sass文件编译成css文件，负责这个处理过程的，就是webpack的loader。

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。

举个稍微复杂的例子，vue-loader，它官网介绍如下：

vue-loader 是一个 Webpack 的 loader，可以将指定格式编写的 Vue 组件转换为 JavaScript 模块。

Vue组件默认分成三部分，