前言

loader几乎是webpack配置必备，但是我们用它的时候有没有想过它的原理到底是怎么回事呢？今天就让我们来探究一下它的原理吧。

loader的作用

在探究原理之前，我们先来回顾一下常用的loader与及相关的作用。

如处理css文件的
style-loader, css-loader, postcss-loader

module:{
  rules: [
    {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
  ]
}

loade执行顺序是从右往左执行的。至于为什么是从右到左执行而不是从左到右？因为webpack选择了compose这样的函数式编程方式，而从左到右则是pipe式编程。

所以上面例子的执行顺序是遇到.css的文件就先经过postcss-loader 处理再到 css-loader 再到style-loader

一般我们配置post-css 还要在项目根目录配置一个postcss.congfig.js的配置，当然也可以在webpack.config.js或者package.json中配置，看个人习惯或者团队要求。
如：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

表示给所有的资源加auto-prefix

然后再输出到css-loader、style-loader处理。

所以我们可以从这些现象就可以猜出来loader其实就像一个函数，有参数输入，经过处理，然后将处理好的结果输出。

可以打开webpack官网loader部分https://webpack.js.org/api/loaders/，这里详细指出了如何写一个loader。通过这些介绍，果然和我们猜的一样，loader就是一个函数。

如写一个 sync-loader.js

module.exports = function(content, map, meta) {
  return someSyncOperation(content);
};

最后导出一个函数，这个函数有几个参数，其中主要用到的就是content这个参数，它表示读取到的对应的文件的源码内容，类型可以是string 也可以是buffer。我们就可以在这个方法里面对这些源码进行操作了。

例如postcss-loader的伪代码：

const autoPrefixHandle = (content) => {
  const autoPrefixMap = {
    flex: ['-webkit-box-flex', '-ms-flex']
    ...order code
  }
  //然后 对content进行分析匹配，
  // 一旦发现flex:xxxx的内容就替换为：
   flex: xxx;
   -webkit-box-flex: xxx;
   -ms-flex: xxx;

  最后返回新的content
  return newContent
}


module.exports = function(content, map, meta) {
  // 对content进行autoprefix处理
  const autoprefixContent = autoPrefixHandle(content);

  return autoprefixContent 
}

以上就是loader的原理，当然，真实情况还要复杂得多，有可能是loader内容处理需要异步处理，也有可能处理出错，还有可能你需返回其他信息等等。具体处理以官方文档为主，它给出了很细的示例。https://webpack.js.org/api/loaders/

总结

loader就是一个函数，这个函数对源文件进行增删改处理，将处理好的结果返回给webpack。这点其实就类似gulp了。以上是我看法，如有不对请留言讨论，谢谢。