从0实现一个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 文件在最后找到了转译后的字符：

参考： juejin.im/post/5cb01f…