摘要：本文將簡單介紹，以及如何去編寫一個來滿足自身的需求，從而也能提高對的認識與使用，努力進階為配置工程師。用于對模塊的源代碼進行轉換。在我們使用它們前，我們得知道自己需要什么。另外，還需要考慮一些異常的處理，如模板文件找不到。

本文將簡單介紹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組件默認分成三部分，