Webpack的配置离不来 loader,官方也有关于如何编写一个loader的文档介绍,这篇文章会通过手写一些常见的loader,加深对loader的认识,提高工作中的开发效率。

导出loader

loader是一个函数,接受匹配到的文件资源字符串和SourceMap,我们可以通过修改文件内容的字符串返回给下个一loader处理:

module.exports = function(source,map){
    return source;
}

准备工作

为了方便我们编写loader,我们先准备好webpack环境:

生成一份 package.json:

npm init -y

安装webpack:

npm install webpack webpack -D

创建webpack.config.js文件,并输入以下内容:

// webpack.config.js
const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

package.json加入scripts命令:

  "scripts": {
    "build": "webpack",
    "dev": "webpack --watch"
  },

配置别名

我们知道,webpack 默认会到 node_modules 里面找对应的loader,这样不方便我们调试,我们可以通过给webpack.config.js添加resolveLoader属性,将loader指向我们创建的loaders文件夹

...
  resolveLoader: {
    modules: [
      path.resolve(__dirname, "node_modules"),
      path.resolve(__dirname, "./loaders"),
    ],
  }
... 

创建loaders文件夹,里面将存放我们自己编写的loader

mkdir loaders

另外通过resolveLoader.alias也能配置loader别名:

  resolveLoader: {
    alias: {
      loader1: resolve(__dirname, "./loaders/loader1.js"),
      loader2: resolve(__dirname, "./loaders/loader2.js"),
      loader3: resolve(__dirname, "./loaders/loader3.js"),
    },
  },
  module:{
      rules:[
          {
              test:/\.(js)$/,
              use:["loader1.js","loader2.js","loader3.js]
          }
      ]
  }

第一个 loader

先写一个简单的loader练练手,前面说到loader可以替换目标资源文件的内容,这里我要把项目里面的console.log都干掉,毕竟项目上线的时候控制台出现调试内容不合适。

loaders文件夹下新建cleanlog-loader.js,输入下面内容:

module.exports = function(source){
    return source.replace(/console\.log\(.*\);?\n/g, '');
}

webpack.config.js添加配置:

module:{
    rules:[{
        test: /\.(js)$/,
        use:"cleanlog-loader"
    }]
}

src文件夹下新建index.js写点console内容,然后控制台执行npm run build,可以发现编译后的文件dist/bundle.js已经没有console信息了。

banner-loader

banner-loader可以在脚本文件添加注释信息,配置方式如下:

module:{
    rules:[{
        test: /\.(js)$/,
        use:{
            loader:"banner-loader",
            options:{
                text:"/**** build from chenwl ****/",
            }
        }
    }]
}

这里有两个地方需要考虑:

  • 获取配置信息 loader-utils
  • 校验配置参数是否正确 schema-utils

loaders 文件夹下创建banner-loader.js,输入下面内容:

const fs = require("fs");
const {resolve} = require("path");
const loaderUtils = require("loader-utils");
const { validate } = require("schema-utils");

module.exports = function (source) {
    // 获取配置参数
    let options= loaderUtils.getOptions(this);
    let schema = {
      type: "object",
      properties: {
        text: {type: "string"}
     } 
    }
    // 校验参数是否正确
    validate(schema, options,"banner-loader")

    return `${options.text} ${source}`;
}

当然也可以通过读取文件内容写入,新增配置参数 filename,对模板文件进行读取:

    if(options.filename){
        // 依赖某个文件变化,做到实时更新;
        this.addDependency(path.resolve(__dirname, `../${options.filename}`))
        return fs.readFileSync(options.filename, "utf-8") + source;
    }

利用addDependency,如果目标文件发生变化,可以在观察模式(watch mode)下重编译,用npm run dev 启动并修改filename对应的文件试试

babel-loader

babel-loader依赖@babel-core@babel/preset-env,通过npm先安装:

npm install @babel-core @babel/preset-env -D

webpack-config.js添加rules:

{
    test: /\.(js)$/,
    use: [
        {
            loader: "babel-loader",
            options: {
                presets: ["@babel/preset-env"],
            },
        },
    ]
}

可以通过this.async方法在loader中编写异步代码:

// babel-loader.js
const loaderUtils = require("loader-utils");
const babel = require("@babel/core");

module.exports = function(source){
    const options = loaderUtils.getOptions(this);
    const cb = this.async(); // 异步函数
    babel.transform(source,{
        ...options,
        sourceMaps:true
    },function(err,result){
        cb(err, result.code)
    })
}

style-loader 和 less-loader

// less-loader
let less = require("less");
module.exports = function (source) {
    let cssStr = "";
    // 用less转成css
    less.render(source,function(error,result) {
        if(!error){
            cssStr = result.css
        }
    });
    return cssStr
}
// style-loader
module.exports = styleLoader(source) {
    // js 字符串,生成style标签插入到模板文件中
    let code = `
        let styleEl = document.createElement("style");
        styleEl.innerHTML = ${JSON.stringify(source)};
        document.head.appendChild(styleEl);
    `;
    return code.replace(/\/n/,"");
}

file-loader

我们知道 webpack 是识别不了js以外的其它文件的,所以file-loader需要设置loader.raw = true,让 loader 知道现在处理的是二进制的内容:

const loaderUtils = require("loader-utils");

function fileLoader(source) {
  // interpolate 插值
  let fileUrl = loaderUtils.interpolateName(this, "[hash].[ext]", {
    content: source,
  });

  this.emitFile(fileUrl,source);
  // 转换后的Buffer最终是要被插入到页面中,返回类型只能是 buffer 或 string
  // fileUrl 记得加引号,不然会报错哦
  return `module.exports = '${fileUrl}'`
}

// loader 处理的是二进制的内容
fileLoader.raw = true;

module.exports = fileLoader;

url-loader

url-loader目的是将小图转成base64编码,否则就用file-loader处理:

// url-loader.js
const loaderUtils = require("loader-utils");
const mime = require("mime");

function urlLoader(source) {
    let {limit} = loaderUtils.getOptions(this);
    if(limit > source.length){
        let code = `data:${mime.getType(this.resourcePath)};base64,${source.toString('base64')}`
        return `module.exports = "${code}"`
    }else{
        return require("./file-loader").call(this, source)
    }
}
urlLoader.raw = true;
module.exports = urlLoader;
03-06 00:09