Webpack loader 介绍

Webpack 支持使用 loader 对文件进行预处理。你可以构建包括 JavaScript 在内的任何静态资源。并且可以使用 Node.js 轻松编写自己的 loader。

在 ​require()​ 语句中使用 ​loadername!​ 作为前缀的方式来使用 loader，或者在 webpack 配置中配置 regex 来自动应用它们 – 请参阅 配置 。

文件

• ​val-loader​ 将代码作为模块执行，并将其导出为 JS 代码
• ​ref-loader​ 用于手动建立文件之间的依赖关系

JSON

• ​cson-loader​ 加载并转换 CSON 文件

语法转换

• ​babel-loader​ 使用 Babel 加载 ES2015+ 代码并将其转换为 ES5
• ​esbuild-loader​ 加载 ES2015+ 代码并使用 esbuild 转译到 ES6+
• ​buble-loader​ 使用 Bublé 加载 ES2015+ 代码并将其转换为 ES5
• ​traceur-loader​ 使用 Traceur 加载 ES2015+ 代码并将其转换为 ES5
• ​ts-loader​ 像加载 JavaScript 一样加载 TypeScript 2.0+
• ​coffee-loader​ 像加载 JavaScript 一样加载 CoffeeScript
• ​fengari-loader​ 使用 fengari 加载 Lua 代码
• ​elm-webpack-loader​ 像加载 JavaScript 一样加载 Elm

模板

• ​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 文件并解析 import 的 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

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