非常教程

Webpack参考手册

装载 | 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加载并编译角度组件