Loader

什么是loader

Webpack 本身只能处理JavaScript模块，如果要处理其他类型的文件，就需要使用loader 进行转换。
Loader可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。

常用Loader

文件

file-loader 把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
url-loader 像 file loader 一样工作，但如果文件小于限制，可以返回 data URL
raw-loader 加载文件原始内容（utf-8）可以将文件作为字符串导入的 webpack loader
source-map-loader 加载额外的 Source Map 文件，以方便断点调试
svg-inline-loader 把压缩后的 SVG 内容注入到代码中
node-loader：加载 Node.js 原生模块 .node 文件
image-webpack-loader 加载并且压缩图片文件

JSON

json-loader 加载 JSON 文件（默认包含）
json5-loader 加载和转译 JSON 5 文件
cson-loader 加载和转译 CSON 文件
yaml-loader：加载 YAML 文件将YAML转化为JSON

样式

style-loader 将模块的导出作为样式添加到 DOM 中
css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
less-loader 加载和转译 LESS 文件
sass-loader 加载和转译 SASS/SCSS 文件
postcss-loader 扩展 CSS 语法，使用下一代 CSS，可以配合 autoprefixer 插件自动补齐 CSS3 前缀

css-loader和style-loader的区别：
引用《入门webpack》中的原文：css-loader使你能够使用类似@import和url（…）的方法实现require的功能，style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的js文件中。

因此，我们这样配置后，遇到后缀为.css的文件，webpack先用css-loader加载器去解析这个文件，遇到“@import”“url”等语句就将相应样式文件引入（所以如果没有css-loader，就没法解析这类语句），最后计算完的css，将会使用style-loader生成一个内容为最终解析完的css代码的style标签，放到head标签里。需要注意的是，loader是有顺序的，webpack肯定是先将所有css模块依赖解析完得到计算结果再创建style标签。因此应该把style-loader放在css-loader的前面（webpack loader的执行顺序是从右到左）。

转换编译

babel-loader 加载 ES2015+ 代码，然后使用 Babel 转译为 ES5
ts-loader 把 TypeScript 转换成 JavaScript
awesome-typescript-loader：把 TypeScript 转换成 JavaScript，性能要比 ts-loader 好
coffee-loader：把 CoffeeScript 转换成 JavaScript

模板

html-loader 导出 HTML 为字符串，需要引用静态资源
handlebars-loader：把 Handlebars 模版编译成函数返回
ejs-loader：把 EJS 模版编译成函数返回
markdown-loader 将 Markdown 转译为 HTML
react-markdown-loader 使用 markdown-parse parser(解析器) 将 Markdown 编译为 React 组件
extract-loader

清理和测试

mocha-loader 使用 mocha 测试（浏览器/NodeJS）
eslint-loader PreLoader，使用 ESLint 清理代码
jshint-loader PreLoader，使用 JSHint 清理代码
jscs-loader PreLoader，使用 JSCS 检查代码样式

Webpack系列-常用的loader