Loaders

Loaders

webpack 支持使用加载器来预处理文件。这使您可以捆绑 JavaScript 之外的任何静态资源。您可以使用 Node.js 轻松编写自己的加载程序。

加载程序通过loadername!在require()语句中使用前缀来激活，或者通过 webpack 配置中的正则表达式自动应用 - 请参阅配置。

文档

• raw-loader 加载文件的原始内容（utf-8）

• val-loader 将代码作为模块执行，并将导出视为JS代码

• url-loader像文件加载器一样工作，但如果文件小于限制，则可以返回数据tURL

• file-loader 将文件发送到输出文件夹并返回（相对）URL

JSON

• json-loader加载 JSON 文件（默认包含）

• json5-loader加载并转储 JSON 5文件

• cson-loader Loads and transpiles a CSON file

Transpiling

• script-loader 在全局上下文中执行一次 JavaScript 文件（如在脚本标记中），不需要解析

• babel-loader使用 Babel 加载 ES2015 +代码并将其转换为 ES5

• buble-loader使用Bublé加载 ES2015 +代码并转储到 ES5

• traceur-loader使用 Traceur 加载 ES2015 +代码并转储到 ES5

• ts-loader或像 JavaScript 一样awesome-typescript-loader加载 TypeScript 2.0+

• coffee-loader像 JavaScript 一样加载 CoffeeScript

模板

• html-loader 将 HTML 导出为字符串，需要引用静态资源

• pug-loader 加载帕格模板并返回一个函数

• jade-loader 加载 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 时非常有用。

造型

• style-loader 将模块的导出作为样式添加到 DOM

• css-loader 使用解析的导入加载 CSS 文件并返回 CSS 代码

• less-loader 加载并编译一个 LESS 文件

• sass-loader 加载并编译 SASS / SCSS 文件

• postcss-loader使用 PostCSS 加载和转换CSS / SSS 文件

• stylus-loader 加载并编译 Stylus 文件

Linting &&测试

• mocha-loader摩卡测试（Browser / NodeJS）

• eslint-loaderPreLoader 使用 ESLint 编写代码

• jshint-loader预加载器使用掉毛代码 JSHint

• jscs-loader用于使用 JSCS 进行代码样式检查的 PreLoader

• coverjs-loaderPreLoader 使用 CoverJS 来确定测试覆盖率

构架

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

• polymer-loader使用预处理器和require()Web 组件处理 HTML 和 CSS，如一流模块

• angular2-template-loader加载并编译角度组件