webpack loader原理

在实现之前我们先来了解以下webpack的打包流程：

初始化配置对象，创建compiler对象
实例化插件，调用插件的apply方法，挂载插件的监听
从入口文件执行编译，按照文件类型调用相应的loader，在合适的时间调用plugin执行，并查找各个模块的依赖
将编译后的代码组装成一个个代码块（chunk），并安依赖和配置确定输出内容
根据output把文件输出到对象的目录下

可以看出loader在webpack打包的过程中起到了至关重要的作用。

loader到底做了什么？

由于webpack是基于Node的所以webpack只能识别.js文件，所以针对其他的文件就需要转译，这时候就需要用到我们的loader了。

loader是文件加载器，能够加载资源文件，并对这些文件进行特定的处理，然后打包的指定文件中，简单来说就是将webpack传入的字符串做出特定的处理修改。

比如：A.less -> A.css。

loader特点

loader的执行顺序和代码书写的顺序是相反的，即：最后一个loader最先执行，第一个loader最后执行
第一个执行的loader会接收源文件做为参数，下一次执行的loader会接收前一个loader执行的返回值做为参数

loader编写原则

单一原则: 每个 Loader 只做一件事；
链式调用: Webpack 会按顺序链式调用每个 Loader；
统一原则: 遵循 Webpack 制定的设计规则和结构，输入与输出均为字符串，各个 Loader 完全独立，即插即用；

实现loader

需求：将.txt后缀的文件中的内容倒叙并大写。

首先创建webpack-loader文件夹。输入npm init -y初始化。安装webapck和webpack-cli：npm i webpack webpack-cli -D。

在package.json文件下添加脚本

...
"scripts": {
    "build": "webpack",
    ...
}
...

创建test.txt文件夹输入内容：hello world

创建loaders文件夹新建两个loader：
编写两个loader是为了符合单一职责原则。

// loader1，倒叙
module.exports = function (src) {
 src = src.split('').reverse().join('')
 return src;
}
// loader2，大写
module.exports = function (src) {
   src = src.charAt(0).toUpperCase() + src.slice(1)
  // 这里为什么要这么写？因为直接返回转换后的字符串会报语法错误，
  // 这么写import后转换成可以使用的字符串
  return `module.exports = '${src}'`
 }

添加webpack.config.js配置文件

const path = require('path')

module.exports = {
  entry: {
    app: './test.txt'
  },
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: [
          './loaders/myloader2.js','./loaders/myloader1.js'
        ]
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].txt'
  }
}

文件结构

最后：输入命令行npm run build
打包成功，并生成了dist/app.txt文件。

打开app.txt文件在最后找到了转译后的字符：

参考：https://juejin.im/post/5cb01f32e51d456e5e035ef7