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

本文將簡單介紹webpack loader，以及如何去編寫一個loader來滿足自身的需求，從而也能提高對webpack的認識與使用，努力進階為webpack配置工程師。

webpack想必前端圈的人都知道了，大多數(shù)人也都或多或少的用過。簡單的說就是它能夠加載資源文件，并對這些文件進行一些處理，諸如編譯、壓縮等，最終一起打包到指定的文件中?？梢哉f，它作為一個打包工具，在前端工程化浪潮中，起到了中流砥柱的作用。

那webpack其中非常重要的一環(huán)就是，能夠?qū)虞d的資源文件，進行一些處理。比如把less、sass文件編譯成css文件，負責(zé)這個處理過程的，就是webpack的loader。

loader 用于對模塊的源代碼進行轉(zhuǎn)換。loader 可以使你在 import 或"加載"模塊時預(yù)處理文件。因此，loader 類似于其他構(gòu)建工具中“任務(wù)(task)”，并提供了處理前端構(gòu)建步驟的強大方法。

舉個稍微復(fù)雜的例子，vue-loader，它官網(wǎng)介紹如下：

vue-loader 是一個 Webpack 的 loader，可以將指定格式編寫的 Vue 組件轉(zhuǎn)換為 JavaScript 模塊。

Vue組件默認分成三部分，