Loader

   loader用于对模块的源代码进行转换，loader可以使你在import或“加载”模块时预处理文件，比如loader可以将不同的语言（如TypeScript）转换成JavaScript，或将内联图像转换为data URL, loader甚至允许你直接在Javascript模块中import  CSS文件, 分析转换scss为css,或者把下一代的JS文件(ES6,ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的loaders可以把React的中用到的JSX文件转换为JS文件。

使用Loader，可以做一下工作：

• TypeScript —- >>> JavaScript
• 内联图像 —- >>> dataURL
• scss —- >>> css
• ES6,ES7 —- >>> 现代浏览器兼容的JS文件
• JSX文件 —- >>> JS文件
  

使用

**
1.先导入相应的loader，
npm install —save-dev css-loader
npm install —save-dev ts-loader

2.需要在webpack.config.js文件中进行配置。
test属性，用于标识出应该被对应的loader进行转换的某个或某些文件
use属性，表示进行转换时，应该使用哪个loader。

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};
//在配置中进行选项的设置。
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

常见的loader

文件

• raw-loader 加载文件原始内容（utf-8）
• val-loader 将代码作为模块执行，并将 exports 转为 JS 代码
• url-loader 像 file loader 一样工作，但如果文件小于限制，可以返回 data URL

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

  JSON

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

• json5-loader 加载和转译 JSON 5 文件

• cson-loader 加载和转译 CSON 文件

  转换编译(Transpiling)

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

• babel-loader 加载 ES2015+ 代码，然后使用 Babel 转译为 ES5
• buble-loader 使用 Bublé 加载 ES2015+ 代码，并且将代码转译为 ES5
• traceur-loader 加载 ES2015+ 代码，然后使用 Traceur 转译为 ES5
• ts-loader 或 awesome-typescript-loader 像 JavaScript 一样加载 TypeScript 2.0+
• coffee-loader 像 JavaScript 一样加载 CoffeeScript

模板(Templating)

• html-loader 导出 HTML 为字符串，需要引用静态资源
• pug-loader 加载 Pug 模板并返回一个函数
• jade-loader 加载 Jade 模板并返回一个函数
• markdown-loader 将 Markdown 转译为 HTML
• react-markdown-loader 使用 markdown-parse parser(解析器) 将 Markdown 编译为 React 组件
• posthtml-loader 使用 PostHTML 加载并转换 HTML 文件
• handlebars-loader 将 Handlebars 转移为 HTML
• markup-inline-loader 将内联的 SVG/MathML 文件转换为 HTML。在应用于图标字体，或将 CSS 动画应用于 SVG 时非常有用。

样式

• style-loader 将模块的导出作为样式添加到 DOM 中
• css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
• less-loader 加载和转译 LESS 文件
• sass-loader 加载和转译 SASS/SCSS 文件
• postcss-loader 使用 PostCSS 加载和转译 CSS/SSS 文件
• stylus-loader 加载和转译 Stylus 文件

清理和测试(Linting && Testing)

• mocha-loader 使用 mocha 测试（浏览器/NodeJS）
• eslint-loader PreLoader，使用 ESLint 清理代码
• jshint-loader PreLoader，使用 JSHint 清理代码
• jscs-loader PreLoader，使用 JSCS 检查代码样式
• coverjs-loader PreLoader，使用 CoverJS 确定测试覆盖率

框架(Frameworks)

• vue-loader 加载和转译 Vue 组件
• polymer-loader 使用选择预处理器(preprocessor)处理，并且 require() 类似一等模块(first-class)的 Web 组件
• angular2-template-loader 加载和转译 Angular 组件