加载器索引

Webpack 允许使用 loader 预处理文件。这使你能够打包任何静态资源，远超 JavaScript 本身。你可以使用 Node.js 轻松编写自己的 loader。

Loader 是独立的包，用于扩展 webpack 的能力，并在更广泛的生态系统中维护。

Loader 通过在 import .. from "mod"; / require() 语句中使用 loadername! 前缀来激活，或者通过 webpack 配置中的正则自动应用——参见配置。

文件

• 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 导出为字符串，并引用静态资源的 require 引用
• 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 代码
• css-utility-loader 在构建时自动解析并翻译旧版 CSS 属性为现代实用类（Tailwind）
• less-loader 加载并编译 LESS 文件
• sass-loader 加载并编译 SASS/SCSS 文件
• postcss-loader 使用 PostCSS 加载并转换 CSS/SSS 文件
• stylus-loader 加载并编译 Stylus 文件

框架

• vue-loader 加载并编译 Vue 组件
• angular2-template-loader 加载并编译 Angular 组件

Awesome

更多第三方 loader，请参阅 awesome-webpack 列表。