前言

Webpack 支持使用 loader 對(duì)文件進(jìn)行預(yù)處理。你可以構(gòu)建包括 JavaScript 在內(nèi)的任何靜態(tài)資源。并且可以使用 Node.js 輕松編寫自己的 loader。

在 ?require()? 語句中使用 ?loadername!? 作為前綴的方式來使用 loader，或者在 webpack 配置中配置 regex 來自動(dòng)應(yīng)用它們 - 請(qǐng)參閱 配置 。

文件

• ?val-loader? 將代碼作為模塊執(zhí)行，并將其導(dǎo)出為 JS 代碼
• ?ref-loader? 用于手動(dòng)建立文件之間的依賴關(guān)系

JSON

• ?cson-loader? 加載并轉(zhuǎn)換 CSON 文件

語法轉(zhuǎn)換

• ?babel-loader? 使用 Babel 加載 ES2015+ 代碼并將其轉(zhuǎn)換為 ES5
• ?esbuild-loader? 加載 ES2015+ 代碼并使用 esbuild 轉(zhuǎn)譯到 ES6+
• ?buble-loader? 使用 Bublé 加載 ES2015+ 代碼并將其轉(zhuǎn)換為 ES5
• ?traceur-loader? 使用 Traceur 加載 ES2015+ 代碼并將其轉(zhuǎn)換為 ES5
• ?ts-loader? 像加載 JavaScript 一樣加載 TypeScript 2.0+
• ?coffee-loader? 像加載 JavaScript 一樣加載 CoffeeScript
• ?fengari-loader? 使用 fengari 加載 Lua 代碼
• ?elm-webpack-loader? 像加載 JavaScript 一樣加載 Elm

模板

• ?html-loader? 將 HTML 導(dǎo)出為字符串，需要傳入靜態(tài)資源的引用路徑
• ?pug-loader? 加載 Pug 和 Jade 模板并返回一個(gè)函數(shù)
• ?markdown-loader? 將 Markdown 編譯為 HTML
• ?react-markdown-loader? 使用 markdown-parse 解析器將 Markdown 編譯為 React 組件
• ?posthtml-loader? 使用 PostHTML 加載并轉(zhuǎn)換 HTML 文件
• ?handlebars-loader? 將 Handlebars 文件編譯為 HTML
• ?markup-inline-loader? 將 SVG/MathML 文件內(nèi)嵌到 HTML 中。在將圖標(biāo)字體或 CSS 動(dòng)畫應(yīng)用于 SVG 時(shí)，此功能非常實(shí)用。
• ?twig-loader? 編譯 Twig 模板并返回一個(gè)函數(shù)
• ?remark-loader? 通過 remark 加載 markdown，且支持解析內(nèi)容中的圖片

樣式

• ?style-loader? 將模塊導(dǎo)出的內(nèi)容作為樣式并添加到 DOM 中
• ?css-loader? 加載 CSS 文件并解析 import 的 CSS 文件，最終返回 CSS 代碼
• ?less-loader? 加載并編譯 LESS 文件
• ?sass-loader? 加載并編譯 SASS/SCSS 文件
• ?postcss-loader? 使用 PostCSS 加載并轉(zhuǎn)換 CSS/SSS 文件
• ?stylus-loader? 加載并編譯 Stylus 文件

框架

• ?vue-loader? 加載并編譯 Vue 組件
• ?angular2-template-loader? 加載并編譯 Angular 組件

Awesome

有關(guān)更多第三方 loader，請(qǐng)參閱 awesome-webpack 中的列表。