编写属于自己的Webpack loader

记录学习过程，如有错误欢迎指出

前言

在实际开发中,我们难免会遇到没有对应的loader的情况.这时我们就需要自己编写一个loader来处理,Webpack loader就像是一个机器,将文件输入进这个机器,然后这个机器会根据设定的规则进行处理后返回处理完的文件

前置知识 Webpack基础

My first loader

我们先写一个函数,这个函数的第一个参数是接收文件内容

//customize-loader.js
module.exports = function (file){
    //注意这里是模板字符串拼接导出
    return `modules.exports = ${file.split('')}`
}

再编写一个需要被处理的文件

//test.txt
333

入口文件

//index.js
import content from "./test.txt";
console.log(content);

编写webpack config文件

//webpack.config.js
const path = require("path");

module.exports = {
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, ""),
    filename: "bundle.js",
  },
  
  module: {
    rules: [
      {
        //匹配那个被处理的文件
        test: /\.txt$/,
        use:["./customize-loader.js"]
      }
    ],
  },
  
  ...

package.json

{
  "name": "customize-loader",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    //打包指令
    "build": "webpack build --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }
}

npm run build

查看bundle.js

output:33330

我们的第一个loader就实现了!

链式loader

我们在使用webpack搭建项目时,有很多时候都会使用到链式loader,因为一个loader往往完成不了全部工作或满足需求

现在我们基于第一个loader进行改写,让它变成可链式调用的loader

//新增customize-loader2.js
module.exports = function (file) {
  let result = "";
  if (file) {
    let nums = file.split("");
    result = 1;
    for (let i = 0; i < nums.length; i++) {
      result *= nums[i];
    }
  }
  //这里return 结果就行,因为这个loader的返回会传递给下一个loader的参数
  return result;
};

ps:该例子来源于`Webpack+Babel入门与实例详解-姜瑞涛`

Webpack.config.js

...
module: {
    rules: [
      {
        test: /\.txt$/,
        //注意顺序
        use: ["./customize-loader.js", "./customize-loader2.js"],
      },
    ],
  },
...

npm run build

output:810

链式loader就完成了

loader传参

Webpack.config.js

      {
        test: /\.txt$/,
        use: {
          loader: "./customize-loader.js",
          options: {
          //设置参数
            multiple: 10,
          },
        },
      },

customize.loader.js

//this.query.multiple获取参数
module.exports = function (file) {
  if (!this.query.multiple) {
    return `modules.exports = ${file * 10}`;
  }
  return `modules.exports = ${file * this.query.multiple}`;
};

总结

Webpack loader在项目打包构建中起到巨大的作用,自定义loader可以让我们更加灵活

记录学习过程，如有错误欢迎指出