載入器

Webpack 啟用使用 載入器 來預處理檔案。這允許您組合任何靜態資源，而遠遠超乎 JavaScript。您可以使用 Node.js 輕鬆撰寫您自己的載入器。

載入器透過在 require() 陳述式中使用 loadername! 前綴來啟用，或透過 regex 從您的 webpack 組態自動套用 – 請參閱 組態。

檔案

• val-loader 將程式碼作為模組執行，並將匯出視為 JS 程式碼
• ref-loader 手動在任何檔案之間建立相依性

JSON

• cson-loader 載入並轉譯 CSON 檔案

轉譯

• babel-loader 載入 ES2015+ 程式碼，並使用 Babel 轉譯為 ES5
• esbuild-loader 載入 ES2015+ 程式碼，並使用 esbuild 轉譯為 ES6+
• buble-loader 載入 ES2015+ 程式碼，並使用 Bublé 轉譯為 ES5
• traceur-loader 載入 ES2015+ 程式碼，並使用 Traceur 轉譯為 ES5
• ts-loader 載入 TypeScript 2.0+，就像 JavaScript
• coffee-loader 載入 CoffeeScript，就像 JavaScript
• fengari-loader 使用 fengari 載入 Lua 程式碼
• elm-webpack-loader 載入 Elm，就像 JavaScript

範本

• html-loader 將 HTML 匯出為字串，需要靜態資源的參考
• pug-loader 載入 Pug 和 Jade 範本並傳回一個函式
• markdown-loader 將 Markdown 編譯成 HTML
• react-markdown-loader 使用 markdown-parse 解析器將 Markdown 編譯成 React 元件
• posthtml-loader 使用 PostHTML 載入並轉換 HTML 檔案
• handlebars-loader 將 Handlebars 編譯成 HTML
• markup-inline-loader 將 SVG/MathML 檔案內嵌到 HTML。在套用圖示字型或將 CSS 動畫套用至 SVG 時很有用。
• twig-loader 編譯 Twig 範本並傳回一個函式
• remark-loader 透過 remark 載入 markdown，並內建影像解析度

樣式

• style-loader 將模組的匯出內容作為樣式加入 DOM
• css-loader 載入 CSS 檔案，並解析匯入內容並傳回 CSS 程式碼
• less-loader 載入並編譯 LESS 檔案
• sass-loader 載入並編譯 SASS/SCSS 檔案
• postcss-loader 使用 PostCSS 載入並轉換 CSS/SSS 檔案
• stylus-loader 載入並編譯 Stylus 檔案

框架

• vue-loader 載入並編譯 Vue 元件
• angular2-template-loader 載入並編譯 Angular 元件

超棒

更多第三方載入器，請參閱 awesome-webpack 的清單。