[TOC] > [loader 插件列表](https://webpack.docschina.org/loaders/) ## 列表 ### 文件 ``` raw-loader 加載文件原始內容（utf-8） val-loader 將代碼作為模塊執行，并將 exports 轉為 JS 代碼 url-loader 像 file loader 一樣工作，但如果文件小于限制，可以返回 data URL file-loader 將文件發送到輸出文件夾，并返回（相對）URL JSON json-loader 加載 JSON 文件（默認包含） json5-loader 加載和轉譯 JSON 5 文件 cson-loader 加載和轉譯 CSON 文件 ``` ### 轉換編譯(Transpiling) ``` script-loader 在全局上下文中執行一次 JavaScript 文件（如在 script 標簽），不需要解析 babel-loader 加載 ES2015+ 代碼，然后使用 Babel 轉譯為 ES5 buble-loader 使用 Bublé 加載 ES2015+ 代碼，并且將代碼轉譯為 ES5 traceur-loader 加載 ES2015+ 代碼，然后使用 Traceur 轉譯為 ES5 ts-loader 或 awesome-typescript-loader 像 JavaScript 一樣加載 TypeScript 2.0+ coffee-loader 像 JavaScript 一樣加載 CoffeeScript ``` ### 模板(Templating) ``` html-loader 導出 HTML 為字符串，需要引用靜態資源 pug-loader 加載 Pug 模板并返回一個函數 jade-loader 加載 Jade 模板并返回一個函數 markdown-loader 將 Markdown 轉譯為 HTML react-markdown-loader 使用 markdown-parse parser(解析器) 將 Markdown 編譯為 React 組件 posthtml-loader 使用 PostHTML 加載并轉換 HTML 文件 handlebars-loader 將 Handlebars 轉移為 HTML markup-inline-loader 將內聯的 SVG/MathML 文件轉換為 HTML。在應用于圖標字體，或將 CSS 動畫應用于 SVG 時非常有用。 ``` ### 樣式 ``` style-loader 將模塊的導出作為樣式添加到 DOM 中 css-loader 解析 CSS 文件后，使用 import 加載，并且返回 CSS 代碼 less-loader 加載和轉譯 LESS 文件 sass-loader 加載和轉譯 SASS/SCSS 文件 postcss-loader 使用 PostCSS 加載和轉譯 CSS/SSS 文件 stylus-loader 加載和轉譯 Stylus 文件 ``` ### 清理和測試(Linting && Testing) ``` mocha-loader 使用 mocha 測試（瀏覽器/NodeJS） eslint-loader PreLoader，使用 ESLint 清理代碼 jshint-loader PreLoader，使用 JSHint 清理代碼 jscs-loader PreLoader，使用 JSCS 檢查代碼樣式 coverjs-loader PreLoader，使用 CoverJS 確定測試覆蓋率 ``` ### 框架(Frameworks) ``` vue-loader 加載和轉譯 Vue 組件 polymer-loader 使用選擇預處理器(preprocessor)處理，并且 require() 類似一等模塊(first-class)的 Web 組件 angular2-template-loader 加載和轉譯 Angular 組件 ```