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