loader本質上是一個函數，將其作為模塊，使用CommonJS規則導出，其作用是將某個字符串轉換成另一個源碼字符串返回，在模塊解析的過程中被調用，以得到最終的源碼。一般情況不會讓我們寫一個loader的，而且也有大佬開發好用的loader可以使用，因此我們來了解一下如何配置一個loader。

之前講過一些webpack的其他配置，有問題的話，可以點擊這里。打開 webpack.config.js 文件，我們在module屬性中對loader進行配置，代碼如下

module.exports = {mode : "production",module: { //開始配置loaderrules: [{ //規則1test: /index\.js$/, //正則表達式，匹配模塊的路徑,該行表示匹配文件名為index.js的文件use:["./loaders/loader1","./loaders/loader2"] //匹配到文件之后，使用哪些loader，順序是從后到前，該行表示匹配到index.js文件后，先過loader2加載器，再過loader1加載器},{ //規則2test: /\.js$/, //該行表示匹配后綴名為js的文件use: ["./loaders/loader3","./loaders/loader4"]}]} }

上述代碼在打包的時候，先按照test中的正則表達式匹配到文件，（以下是個人理解）然后將文件對應的loader按照use中的順序放入一個空間，注意的是若滿足規則一正則表達式匹配的文件同時滿足規則二的正則表達式，則將規則二中的加載器放在該文件對應的空間中規則一的加載器的后面，執行時，從該空間最后一個加載器開始向前執行

總結

以上是生活随笔為你收集整理的如何配置webpack的loader的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。