一、babel-loader
這個loader用于將ES6和以上版本的JavaScript代碼轉(zhuǎn)換為ES5代碼，從而在更早的瀏覽器版本中運行。
二、css-loader
css-loader會處理CSS文件，并將其轉(zhuǎn)換為JavaScript模塊。
三、style-loader
style-loader將處理過的CSS模塊插入到DOM中，使其樣式可以在網(wǎng)頁上顯示。
四、file-loader
file-loader用于處理項目中的文件，如圖片、字體等，并且可以將它們輸出到輸出目錄。
五、url-loader
這個loader可以將文件轉(zhuǎn)換為base64 URL，并直接將其插入到代碼中，以此來減少HTTP請求的次數(shù)。對于小型文件特別有用。
六、sass-loader
這個loader可以將Sass文件轉(zhuǎn)換為CSS文件。
七、ts-loader
用于將TypeScript代碼轉(zhuǎn)換為JavaScript代碼。
這些只是一部分常用的Webpack Loader，其實Webpack社區(qū)有大量的Loader可供選擇，你可以根據(jù)自己項目的實際需求選擇適合的Loader。
延伸閱讀
Webpack插件(Plugins)的作用及常用插件
除了Loader，Webpack還有另一個重要的工具：插件(Plugins)。插件可以在Webpack的構(gòu)建過程中執(zhí)行各種各樣的任務(wù)，比如清理構(gòu)建目錄、壓縮生成的代碼、生成資源清單等。
以下是一些常用的Webpack插件：
HtmlWebpackPlugin: 這個插件會自動創(chuàng)建一個新的HTML文件，其中包含了所有你的bundle。CleanWebpackPlugin: 這個插件會在每次構(gòu)建前清理輸出目錄，這樣可以保證每次構(gòu)建的輸出都是最新的。MiniCssExtractPlugin: 這個插件會將CSS從JavaScript代碼中分離出來，然后在一個獨立的CSS文件中輸出。UglifyJsPlugin: 這個插件會壓縮生成的JavaScript代碼，從而減少了代碼的體積。DefinePlugin: 這個插件允許你創(chuàng)建全局常量，這些常量在編譯時就已經(jīng)確定，可以在項目中任何位置使用。
京公網(wǎng)安備 11010802030320號