【Webpack5笔记】loader的概念以及手写clean-log-loader、banner-loader、babel-loader和file-loader

Loader概念

帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。 

Loader的执行顺序

pre：前置loader

normal：普通loader

inline：内联loader

post：后置loader

执行的优先级：pre>normal>inline>post

相同优先级执行顺序为：从右到左，从下到上 

// 此时loader执行顺序：loader3 - loader2 - loader1
module: {
  rules: [
    {
      test: /\.js$/,
      loader: "loader1",
    },
    {
      test: /\.js$/,
      loader: "loader2",
    },
    {
      test: /\.js$/,
      loader: "loader3",
    },
  ],
},

// 此时loader执行顺序：loader1 - loader2 - loader3
module: {
  rules: [
    {
      enforce: "pre",
      test: /\.js$/,
      loader: "