一、Loader介紹
1.官網介紹：loader 用於對模塊的源代碼進行轉換。loader 可以使你在 import 或"加載"模塊時預處理文件。因此，loader 類似於其他構建工具中“任務(task)”，並提供了處理前端構建步驟的強大方法。loader 可以將文件從不同的語言（如 TypeScript）轉換為 JavaScript，或將內聯圖像轉換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件！
2.簡單來說，loader就是將不同語言轉成webpack可識別並打包代碼的函數，它的執行在webpack打包之前
二、Loader使用
以官網css-loader和style-loader的使用為例：
三、自定義簡單的Loader
四、串行Loader的正常執行順序
正常的loader的執行順序是從右向左的，如下圖,執行順序為：c-loader ----> b-loader----> a---->loader, 也就是a-loader(b-loader(c-loader(resource)))
五、Loader的pitch方法
在定義一個loader函數時，可以導出一個pitch方法，這個方法會在loader函數執行前執行。
另外，如果存在多個loader串行的情況，這些loader的pitch函數會從左到右依次執行，其示意圖如下：
六、style-loader中pitch的使用
style-loader的作用是將css-loader返回的js符串轉成css樣式，然后添加到html中。它的導出就用到了pitch方法，原因是因為什么呢？我們知道css-loader最后會導出一段js字符串，里面可能包含需要動態執行的函數。按照正常的執行順序，style-loader只能拿到這些字符串而並不能把他們轉成真正的css代碼。因此，在執行css-loader之前，我們需要對在style-loader的pitch方法里面先執行如下代碼（已簡化）
而由上面的loader執行順序圖可知，當style-loader的pitch方法里有返回值時，我們將不再執行剩余的css-loader，這樣不就是完全沒對樣式文件做處理么？這是我最疑惑的地方，后來查到了這么一段話：
其大概的意思是，在style-loader的pitch方法有返回值時，剩余的css-loader的pitch方法、css-loader的normal方法以及style-loader的normal方法都不會執行了。而style-loader的pitch方法里面調用了require('!!.../x.css')，這就會把require的css文件當作新的入口文件，重新鏈式調用剩余的loader函數進行處理。（值得注意的是'!!'是一個標志，表示不會再重復遞歸調用style-loader，而只會調用css-loader處理了）。
作者：帥氣的奶蓋
鏈接：https://www.jianshu.com/p/9dfb8e18e76d
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。