奇怪的知识又增加了，梳理一遍都有哪些loader

今年的五一有点猛。

前情回顾

上篇文章简单介绍了一下loader API,那么除了我们常用的css-loader,sass-loader,style-loader,url-loader,vue-loader之外，还有哪些loader呢，我们一起来梳理一下。

Loaders

webpack支持使用loader对文件进行处理，我们可以构建处理js之外的任何文件，甚至可以用Node.js编写自己的loader。

处理文件

• raw-loader。用于加载文件的原始内容（utf-8）
• val-loader。将代码作为模块执行，并将其导出为 JS 代码
• file-loader。将文件保存至输出文件夹中并返回（相对）URL
• url-loader。与 file-loader 类似，但是如果文件大小小于一个设置的值，则会返回 data URL
• ref-loader。用于手动建立文件之间的依赖关系

处理JSON

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

什么是CSON 我们都知道JSON文件，如：

代码语言：javascript复制

{
  "name":"terrence",
  "age":"18",
  "books":["js","css","html"]
}

如果用CSON写同样的内容，则：

代码语言：javascript复制

# 这里是注释
name: 'terrence'
age: '18'
books: [
  'js'
  'css'
  'html'
]

语法转换

• babel-loader 使用 Babel 加载 ES2015 代码并将其转换为 ES5
• 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 文件

Linting 和测试

• mocha-loader 使用 mocha (Browser/NodeJS) 进行测试
• eslint-loader 使用 ESLint 对代码进行格式化

框架

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

总结

• 简单介绍一下有哪些loader

javascript基础知识总结

ecmascript html css postcss markdown

0 人点赞