loader是什么？

Loaders就是对一个模块源码的转换。它们可以在引入或加载文件时对文件进行预处理。因此loaders有点像其他构建工具中的tasks（任务），可以提供一种有力的方式去处理前端构建步骤。Loaders可以将一种不同类型的语言（比如TypeScript）转换为JavaScript，或者将内嵌图片转换为 data URLs。甚至可以在JavaScript模块中直接引入CSS文件。

编写loader

loader就是一个node模块，它输出了一个函数。当某种资源需要用这个loader转换时，这个函数会被调用。并且，这个函数可以通过提供给它的this上下文访问Loader API。

编写loader

处理一个文件可以使用多个loader，loader的执行顺序是和本身的顺序是相反的，即最后一个loader最先执行，第一个loader最后执行

1. 在项目根目录建一个loaders文件夹
2. webpack中配置：ResolveLoader

module.exports = {
  resolveLoader:{
    // 去哪些目录下寻找 Loader，有先后顺序之分
    modules: ['node_modules','./loaders/'],
  }
}      

或者使用npm link

1. 确保正在开发的本地 Npm 模块（也就是正在开发的 Loader）的 package.json 已经正确配置好；
2. 在本地 Npm 模块根目录下执行 npm link，把本地模块注册到全局；
3. 在项目根目录下执行 npm link loader-name，把第2步注册到全局的本地 Npm 模块链接到项目的 node_moduels 下，其中的 loader-name 是指在第1步中的 package.json 文件中配置的模块名称。

编写一个简单的loader，就叫reverse-txt-loader吧，功能就是对txt文件的内容反转。我们有个test.txt，内容为abcde。

module.exports = function(src) {
  //src是原文件内容（abcde），下面对内容进行处理，这里是反转
  var result = src.split('').reverse().join('');//edcba
  //返回JavaScript源码，必须是String或者Buffer
  this.callback(null, `module.exports = '${result}'`);
  return;
}

在webpack中是这样：

{
      test: /\.tsx?$/,
      use: {
          loader: '路径'
      }
}