常用loader说明

1.加载文件

● raw-loader(https:/http://github.com/webpack-contrib/raw-loader):将文本文件的内容加载到代码中。

● file-loader(https:/http://github.com/webpack-contrib/file-loader):将文件输出到一个文件夹中,在代码中通过相对URL去引用输出的文件。

● url-loader(https://github. com/webpack-contrib/url-loader):和 file-loader 类似,但是能在文件很小的情况下以 base64 方式将文件的内容注入代码中。

● source-map-loader(htps:/http://github.com/webpack-contrib/source-map-loader):加载额外的 SourceMap 文件,以方便断点调试。

● svg-inline-loader(https://github.com/webpack-contrib/svg-inline-loader):将压缩后的SVG内容注入代码中。

● node-loader(https://github.com/webpack-contrib/node-loader)加载Node.js原生模块的node文件。

● image-loader(https://github.com/tcoopman/image-webpack-loader):加载并且压缩图片文件

● json--loader(https://github.com/webpack-contrib/json-loader):加载JSON文件。

● yaml-loader(https://github. com/okonet/yaml-loader):加载 YAML 文件。

2.编译模版

● pug-loader(https://github.com/pugs/pug-loader):将Pug模版转换成 JavaScript 函数并返回

● handlebars-loader(https:/http://github.com/pcardune/handlebars-loader)：将Handlebars模版编译成函数并返回

● ejs-loader(https://github.com/okonet/ejs-loader):将EJS模版编译成函数并返回。

● haml-loader(https://github.com/alexanderpAvlenko/haml-loader)将HAML代码转换成HTML

● markdown-loader(https://github.com/peerigon/markdown-loader:将 Markdown 文件转换成 HTML

3.转换脚本语言

● babel-loader(https://github.com/babel/babel-loader):将ES6转换成ES5

● ts-loader:将 TypeScript 转换成 JavaScript

● awesome-typescript-loader：将 Type Script 转换成 JavaScript,性能要比 ts-loader 好。

● coffee-loader：将 CoffeeScript 转换成 JavaScript

4.转换样式文件

● css-loader：加载 CSS,支持模块化、压缩、文件导入等特性。

● style-loader：将 CSS 代码注入 JavaScript 中,通过 DOM 操作去加载 CSS。

● sass-loader：将 SCSS/SASS 代码转

换成 CSS。

● postcss-loader：扩展 CSS 语法,使用下一

代 CSS。

● less-loader：将 Less 代码转换成 CSS 代码。

● stylus-loader：将 Stylus 代码转换成 CSS 代码。

5.检查代码

● eslint-loader：通过 ESLint 检查 JavaScript 代码

● tslint-loader：通过 TSLint 检查 TypeScript 代码。

● mocha-loader：加载 Mocha 测试用例的代码

● coverjs-loader:计算测试的覆盖率。

6.其他 Loader

● vue-loader：加载 Vue.js 单文件组件。

● il8n-loader：加载多语言版本,支持国际化。

● ignore- loader：忽略部分文件。

● ui-component-loader：按需加载 UI 组件库。