手写没用的loader

webpack的loader配置应该谁都会，讲道理，我们会使用loader，会配置loader就够了。今天只是了解loader的基本概念和基本的运行原理，了解了就能自己写一个loader了，至于手写一些复杂的loader目前就算了。

先说说webpack中文网对loader的一些介绍：

loader是用于对模块的源代码进行转换，可以在你import或加载模块时预处理文件。loader可以将不同语言（typescript）转换成JavaScript、将内联图像转成data URL、在JavaScript中import css文件。loader有一些特性，loader 支持链式传递。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回webpack所预期的JavaScript。loader可以是同步也可以是异步。loader 模块需要导出为一个函数，并且使用 Node.js 兼容的 JavaScript 编写。内容不多，其实可以去看看，还有几个特性可以看看。

需要注意的几点：

loader就是一个函数，要返回js的脚本

loader要遵循单一原则，只做一件事，所以要有style-loader、css-loader，而不是整合成一个loader

可以链式调用，从右往左，从下往上

loader要是无状态的，不同模块之间不保存状态，要能够单一运行。

配置好常规配置，然后loader指向自己写的loader（loader/loader.js）：

use: path.resolve(__dirname, ‘loader’, ‘loader’)

需要绝对路径，也可以这样：

  resolveLoader: {

    //   alias: {

    //  loader: path.resolve(__dirname, 'loader', 'loader')

    //   },

      modules: ['node_modules', path.resolve(__dirname, 'loader')]

  }

两个选一个，第一个是别名，第二个是loader默认从node_module里面找，找不到就到loader文件夹里面找。

loade.js里面内容：

function loader(resource){

    console.log(resource)

    return resource

}

module.exports = loader;

参数resource就是js的代码，如果return的内容是数字，就会报错，因为要返回预期的JavaScript：

Module build failed: Error: Final loader (./loader/loader.js) didn’t return a Buffer or String

控制台打印（index.js引入a.js）：

loader的运行原理挺简单的，并不复杂，复杂的是要怎么去处理传递进来的代码。

说说loader的几个模式，优先级顺序：pre、normal、inline、post

清空index.js，然后引入loader1、loader2、loader3，分别打印文件名：

use: [‘loader1’, ‘loader2’, ‘loader3’]

这边没有设置什么，就是默认顺序，都是normal，接着设置：

          {

              test: /\.js$/,

              use: 'loader1',

              enforce: 'pre'

          },

          {

            test: /\.js$/,

            use: 'loader2'

          },

          {

            test: /\.js$/,

            use: 'loader3',

            enforce: 'post'

          }

打印出来：

inline比较特殊，如果上面都不干预，新建一个inline-loader.js，引入文件的时候使用：

let str = require(’-!inline-loader!./a.js’)

打印：

-!表示不再用pre和normal的loader处理，所以这边走完inline-loader之后只执行设置post的loader3，另外还有两种，!不走normal，!!什么都不走，只走inline-loader。

loader有两部分组成，pitch和normal，先执行pitch，如果pitch有返回值，则直接跳过接下去的loader直接返回，包括自己，给每个loader加pitch方法并打印：

loader.pitch = function(resource){

    console.log('loader1 pitch')

}

打印：

这边先执行pitch再执行normal，我如果在loader3 pitch这边添加return ‘’，打印：

loader还有很多api，比如异步loader的this.async()，this.callback返回多个结果的函数、通过loader-utils（需要自己安装依赖）获取配置的options参数等等，可以去官网看一下：

https://www.webpackjs.com/api/loaders/#this-target

loader大概就先了解到这样，async和callback使用其实更重要，如果要编写有用的loader要好好研究，今天就不去尝试。 loader运行过程其实不难，难得应该是内部的解析过程。