什么是 loader

webpack 只能处理 js 模块，如果要处理其他类型的文件，需要使用 loader 进行转换；loader 指用来将一段代码转换成另一段代码的 webpack 加载器，loader 只是一个导出为函数的 JavaScript 模块

写一个简单的 loader

loader 就是一个函数，接收源码返回处理后的代码

Javascript

// loaders/loader1.js
function loader(source){
  return source
}
module.exports = loader

loader 的载入方式

直接写成绝对路径

Javascript

module.exports = {
  module: {
    rules: [
      test: /\.js$/,
      use: path.resolve('loaders','loader1')
    ]
  }
}

配置 resolveLoader 的 alias (别名)

Javascript

module.exports = {
  resolveLoader:{
    alias:{
      loader1: path.resolve('loaders','loader1')
    }
  },
  module: {
    rules: [
      test: /\.js$/,
      use: 'loader1'
    ]
  }
}

配置 resolveLoader 的 modules

Javascript

module.exports = {
  resolveLoader:{
    modules: ['node_modules', path.resolve('loaders')]
  },
  module: {
    rules: [
      test: /\.js$/,
      use: 'loader1'
    ]
  }
}

modules: ['node_modules', path.resolve('loaders')]表示先去 node_modules 目录寻找，然后再去根目录下的 loaders 目录寻找

配置多个loader

use:[loader1, loader2, loader3]，loader 执行顺序倒叙：3 - 2 - 1

loader 的分类

pre 在前面，normal 在中间，post 在后面；通过enforce: 'pre'设置，还有一种特殊的 inline-loader

确定分类的 loader 顺序： pre - normal - inline - post，

inline-loader

inline-loader 是一类特殊的 loader，不通过 webpack.config.js 设置，在引入模块的时候指明使用，inline-loader 多出现于 loader 内部，比如 style-loader 会在自身代码里引入 css-loader

Javascript

// index.js use['loader3','loader2','loader1']
let str require('inline-loader!a.js') // 引入a.js时使用inline-loader

// 运行顺序
// loader1, loader2, loader3, loader1, loader2, inline-loader, loader3
// 前三个是处理index.js，后面四个是处理引入a.js

但是当某个文件想特殊处理，比如上边的 a.js，不想让它用 webpack 配置的 pre 和 normal loader，而只使用 inline-loader，可以设置前缀进行配置

Javascript

// index.js
// “-!”,不会让文件再去通过pre+normal loader来处理了
// “!”, 不使用normal-loader
// “!!”，什么都不要，只使用这个inline loader
let str = require("!!inline-loader!./a.js");

loader的组成

每个 loader 都由两部分组成：pitchLoader 和 normalLoader（都是 loader 上挂的方法）；pitch 和 normal 的执行顺序相反，当 pitch 没有定义或者没有返回值时，会依次执行 pitch 再获取资源，执行 loader；如果定义的某个 pitch 有返回值则会跳过读取资源和自己的 loader

Javascript

function loader(source){
  return source
}
loader.pitch = function(){}
loader.normal = funciton(){}
module.exports = loader

pitchLoader 无返回值

markdown

use:['loader3','loader2','loader1']
pitch 无返回值

pitch:   loader3 -> loader2 -> loader1 
                                        \
                                         resource
                                        /
normal:  loader3 <- loader2 <- loader1

pitchLoader 有返回值

markdown

use:['loader3','loader2','loader1']
pitch 有返回值

pitch:   loader3 -> loader2    loader1 
                  /               
              有返回值                  resource
                /                       
normal:  loader3    loader2     loader1

loader 的特点

第一个 loader（执行顺序的最后一个）要返回 js
每个 loader 只做一件内容，为了使 loader 在更多场景下链式调用
每个 loader 都是一个模块
每个 loader 都是无状态的，确保 loader 在不同模块转换之间不保存状态

参考

webpack loader

什么是loader