webpack如何自定义一个loader？

现代前端在开发过程中时常都会使用到webpack，用来对代码进行模块化打包。通常情况下，我们都是直接使用webpack的配置和别人写好的loader。如果自己要实现一个loader，需要怎么做？

1. 什么是loader？

webpack是基于node的模块化打包工具，它本身也只能处理JS和JSON文件，没有处理CSS、图片等其他格式文件的能力。loader就相当于是一个翻译机，将这些文件翻译成webpack能处理的格式。换句话说，loader赋予了webpack处理其他文件的能力。

2. loader的使用

module.exports = {
   
  //...
  module: {
   
    rules: [
      {
   
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', {
   
			loader: 'sass-loader',
			options: {
   
				//...
			}
		}]
      }
    ]
  }
};

• 职责单一： 每个loader只完成一种转换，如sass-loader只讲sass转换为css。
• 链式调用： 第一个loader接收到的是资源文件的内容，后续loader都是接收到的上一个loader返回的处理结果。
• 调用顺序： 在loader中存在一个pitch属性，调用顺序是style-loader(pitch)、css-loader(pitch)、sass-loader(pitch)、sass-loader、css-loader、style-loader。如果其中一个pitch返回了值，则停止后续调用。简单点说就是先从左往右执行pitch，然后从右往左执行loader。

3. 一个基础的loader

上面写了一堆乱七糟八的东西，看起来着实枯燥。现在就写一个一讲自定义loader就会写的例子，就和写代码必先写hello world一样的东西。

一个用于替换的loader。替换原来JS代码中的NAME。
webpack.config.js

const path = require('path');
// 先看看怎么用
module