什么是loader

webpack只能处理javascript的模块，如果要处理其他类型的文件，就需要使用loader来转换。loader是webpack中一个重要的概念，它是指用来降一段代码转换成另一端代码的webpack加载器。
首先，来新建一个项目webpack-loader，并且安装webpack,webpack-cli

// 新建webpack.config.js
let path = require("path");
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "build.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: path.resolve(__dirname, 'loader', 'loader1.js')  // 这里解析除了一个绝对路径“rootpath +“/loader/loader1.js””
      }
    ]
  }
};

上边代码中，对js文件，我们使用loader目录下的loader1.js来转换。接下来我们些loader1.js
现在的文件结构是这样的

image.png
正常情况下loader是一个函数，所以，我们的loader1.js大约是这样的：

//loader1.js
function loader(source) {
  // 这里的参数是源码
  // ...这里就进行一些代码转换
  return source;
}
module.exports = loader;

运行 npx webpack

image.png
但是像path.resolve(__dirname, 'loader', 'loader1.js')这样的写法实在不美观，我们可以再webpack.config.js中加resolveLoader字段来重命名

//webpack.config.js
resolveLoader: {
    modules: ['node_modules', path.resolve(__dirname, 'loader', 'loader1.js')]
    //别名
   // alias: {
    //  loader1: path.resolve(__dirname, 'loader', 'loader1.js')
   // }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'loader1'
      }
    ]
  }

以上，alias和modules都可以实现loader的查找
下边我们来说说loader的配置，先新建两个文件，loader2.js,loader3.js

//loader1.js
function loader(source) {
  console.log("loader1~~~~~~");
  return source;
}
module.exports = loader;
// loader2.js
function loader(source) {
  console.log("loader2~~~~~~");
  return source;
}
module.exports = loader;
//loader3.js
function loader(source) {
  console.log("loader3~~~~~~");
  return source;
}
module.exports = loader;
// webpack.config.js
module.exports = {
...
module: {
    rules: [
      {
        test: /\.js$/,
        use: "loader1"
      },
      {
        test: /\.js$/,
        use: "loader2"
      },
      {
        test: /\.js$/,
        use: "loader3"
      }
    ]
  }
...
}

执行

image.png
如图，之前的博客有提过，loader的执行顺序是从下往上，从右往左的。但如果需要指定顺序的话，笨办法就是按照loader的加载顺序来写，或者配置*enforce*来实现

module: {
    rules: [
      {
        test: /\.js$/,
        use: "loader1",
        enforce: "pre"
      },
      {
        test: /\.js$/,
        use: "loader2"
      },
      {
        test: /\.js$/,
        use: "loader3",
        enforce: "post"
      }
    ]
  }

现在运行

image.png
可以看到“pre”会将loader置前，“post”将loader置后。normal介于两者之间。那么inline类型的loader呢？我们来试一下：

// 新建a.js
module.exports = "lcccc";
//index.js中引入，并且传入inline-loader
console.log("loader");
let str = require('inline-loader!./a.js');
//新建inline-loader.js文件
function loader(source) {
  console.log("inline-loader~~~~~~");
  return source;
}
module.exports = loader;

运行

image.png
可以看到，执行优先级是这样pre > normal > inline > post的
但是当某个文件你想特殊处理，比如上边的a.js，就是不想让它用webpack配置的pre和normal loader，而只使用inline-loader，你可以这样：

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

执行：

image.png
别的情况大佬们自己试试

loader分为Pitch Loader和Normal Loader

图片转自珠峰培训
图片转自珠峰培训
如上图：

loader执行首先会加载pitch-loader（书写loader的顺序），然后加载资源resource，最后执行normal-loader（正常加载loader的顺序，右到左，下往上）
如果pitch-loader有返回值，则会跳过后面的loader，直接走到上一层的normal-loader里面。
从上图也大抵能够理解loader为什么是从下往上，从右往左执行了。至于pitch，后续博文会有详解