Webpack的Loader和Plugin-Toy模板网

这篇具有很好参考价值的文章主要介绍了Webpack的Loader和Plugin。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.Loader

1.1 Loader作用

把js和json外的其它文件转为Webpack可以识别的模块

1.2 Loader简介

1.2.1 Loader类型

1.总类型

pre： 前置loader

normal： 普通loader

inline： 内联loader

post： 后置loader

2.默认类型

默认为normal类型

3.修改类型

配置时可以通过enforce修改pre，normal，post类型。
{
enforce: 'post',
test: /\.js$/,
loader: 'loader'
}

1.2.2 Loader顺序

1.总顺序

类型顺序 > 配置顺序

举例：

配置loader：[A, B, C]，执行顺序为：C -> B -> A

配置loader：[A(enforce: pre), B, C]，执行顺序为 A -> C -> B

2.类型顺序

pre > noraml > inline > post

3.配置顺序

从右到左，从下到上（即配置的链表的逆序）

1.2.3 Loader使用

1.配置Loader

在webpack.config.js中配置Loader将处理哪些类型的文件

配置方法： 见“Webpack学习记录”

2.内联Loader

在引入某个文件时指定使用的Loader

内联方法：

Loader： 多个Loader间用!隔开

参数： 和URL一样用?和&传参给Loader

文件： 文件和Loader间用!隔开

优先级： 类似于配置Loader中的enforce。

!：跳过普通Loader

-!： 跳过前置Loader和普通Loader

!!： 跳过前置Loader和普通Loader和后置Loader

注意：内联Loader在每次引入文件时使用，写的内容太多太分散，且不利于排查问题。不推荐使用。
import test from 'B-loader!A-loader?mode=txt&type=run!./test.txt'
module.exports = function(content) {
    // 通过loaders获取内联的每个loader的具体信息，包括查询参数
    console.log(this.loaders)
    return content
}

3.脚手架Loader

配置方法： 了解即可。下面是对.jade和.css文件使用对应的loader
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

1.3 Loader开发

1.3.1 Loader模式

1.开发Loader基本概念

函数： Loader是一个函数，涉及this调用，不要使用箭头函数

函数参数：

content： 文件内容

map： 代码映射

meta： 传递给下一个Loader的内容

链式调用： 不论采用简洁模式还是普通模式，后续loader会通过callback或返回值获取前一个loader处理内容继续处理

2.同步Loader

注意：同步Loader中不应该存在异步操作

简洁模式

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

普通模式

module.exports = function(content, map, meta) {
 this.callback(null, content, map, meta)
}

3.异步Loader

注意：虽然异步Loader中有异步操作，但是链式调用时只有异步操作完成，才能继续链式调用

简洁模式

module.exports = function(content, map, meta) {
 return new Promise((res) => {
     setTimeout(() => {
         res(content)
     }, 1000)
 })
}

普通模式

module.exports = function(content, map, meta) {
 const callback = this.async()
 setTimeout(() => {
     callback(content, map, meta)
 }, 1000)
}

3.Raw Loader

用途： Raw Loader配置raw为true即可，表示接收Buffer格式的文件二进制数据，通常用于处理图片，音视频等。

模式： 同步和异步模式Raw Loader都可以使用。
module.exports.raw = true
module.exports = function(content, map, meta) {
	return content
}

4.Pitch Loader

用途： Pitch Loader配置pitch为函数即可，表示提前执行pitch函数，可以在函数中返回一个非undefined值来中断链式调用中后续Loader的执行。

模式： 同步和异步模式Pitch Loader都可以使用。

中断： Pitch函数返回值中断后，会导致无法读取文件，后续执行的Loader函数的文件来源是中断Pitch函数的返回值。

顺序：

Pitch阶段： 按照配置的Loader的链表的正序执行它们的Pitch函数。Pitch一旦有返回值，立即执行上一个Pitch对应的Loader并终止链式调用。

读取文件： Pitch阶段结束后Loader读取文件准备执行Loader函数。

Normal阶段： Normal阶段包括pre，normal，inline，post。Normal阶段晚于Pitch阶段。按照配置的Loader的链表的逆序执行它们的Loader函数。

参数：

remainingRequest： 当前Loader之后要使用的Loader，以内联Loader格式显示。

precedingRequest： 当前Loader之前要使用的Loader，显示Loader位置。

data： 用于同一对Pitch和Loader通信。设置data上的属性，Loader可以在this.data中获取到。
module.exports.pitch = (remainingRequest, precedingRequest, data) => {
    // pitch和loader间通信
    data.x = 123
    // 有返回值提前中断
    return 'result'
}
module.exports = function(content, map, meta) {
    // pitch和loader间通信
    console.log(this.data.x)
	return content
}

1.3.2 Loader方法

常用方法

方法描述用法

this.callback 描述Loader返回结果 this.callback(null, content, map, meta)

this.async 标记Loader为异步Loader并返回callback const callback = this.async()

this.getOptions 获取webpack.config.js中配置的Loader的options （注意：schema对象，用于描述校验规则，类似于props-type库） const options = this.getOptions(schema)

this.emitFile 输出文件到打包后的文件夹中 （注意：通常在处理webpack默认解析不了的文件，并且想让它输出到打包后文件夹中的场景中使用） this.emitFile(name, content, sourceMap)

this.utils.contextify 产生一个相对路径 （注意：Path模块产生的路径可能不满足某些Loader的需求，因此一般使用该方法） this.utils.contextify(content, request)

this.utils.absolutify 产生一个绝对路径 this.utils.absolutify(content, request)

方法	描述	用法
this.callback	描述Loader返回结果	this.callback(null, content, map, meta)
this.async	标记Loader为异步Loader并返回callback	const callback = this.async()
this.getOptions	获取webpack.config.js中配置的Loader的options （注意：schema对象，用于描述校验规则，类似于props-type库）	const options = this.getOptions(schema)
this.emitFile	输出文件到打包后的文件夹中（注意：通常在处理webpack默认解析不了的文件，并且想让它输出到打包后文件夹中的场景中使用）	this.emitFile(name, content, sourceMap)
this.utils.contextify	产生一个相对路径（注意：Path模块产生的路径可能不满足某些Loader的需求，因此一般使用该方法）	this.utils.contextify(content, request)
this.utils.absolutify	产生一个绝对路径	this.utils.absolutify(content, request)

1.3.3 clean-log-loader

实现一个清除所有console.log语句的loader
module.exports = function(content) {
	return content.repalce(/console\.log$.*$;?/g, '')
}

1.3.4 banner-loader

实现一个添加作者信息的loader，并支持options配置

banner-loader.js

const schema = {
// options类型
type: "object",
// options属性
properties: {
 name: {
   type: "string",
 },
},
// options是否可以追加属性
additionalProperties: false,
};

module.exports = function (content) {
const options = this.getOptions(schema);

const prefix = `
     /*
        *   Author: ${options?.name || 'Your Name'}
        */
    `;
  return prefix + content;
};

webpack.config.js

module.exports = {
	module: {
		rules: [
            {
                test: /\.js$/,
                loader: './loader/banner-loader',
                options: {
                    name: 'Danny'
                }
            }
		]
	}
}

1.3.5 babel-loader

实现一个babel-loader，做一个控制传参与调用的中间层，转译模块调用第三方模块。

const babel = require("@babel/core");

const schema = {
type: "object",
properties: {
 presets: {
   type: "array",
 },
},
};

module.exports = function (content) {
const callback = this.async();
const options = this.getOptions(schema);

babel.transform(content, options, function (err, result) {
 if (err) callback(err);
 else callback(null, result.code);
});
};

1.3.6 file-loader

实现一个file-loader，让webpack能够处理png资源

注意：回顾一下，通常配置webpack的Loader时对于这种资源只配置 type: 'asset'即可，不用指定Loader

重写文件名： 生成带有Hash值的文件名称
输出文件： 输出资源到打包后文件夹
导出文件： 配置资源导出方式

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

// 处理图片，音视频，字体等文件，需要处理二进制文件
module.exports = function (content) {
  // 生成哈希值文件名
  const interpolatedName = loaderUtils.interpolateName(
    this,
    "[hash].[ext][query]",
    { content }
  );

  // 输出文件
  this.emitFile(interpolatedName, content);

  // 文件输出方式修改
  return `module.exports = '${interpolatedName}'`
};
module.exports.raw = true;

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.png$/,
                loader: './loader/file-loader',
                // 禁止webpack默认处理文件资源，只使用我们自定义的loader
                type: 'javascript/auto'
            }
        ]
    }
}

1.3.7 style-loader

注意：style-loader的实现是一种利用pitch loader解决特殊链式调用的解决方案

实现一个style-loader，配合css-loader使用。在实现时请注意这些问题：

style-loader的作用： style-loader实现时把样式作为集成到style标签中插入文档。
css-loader的作用： css-loader帮助我们解决了依赖引入等问题，例如背景图需要使用图片。

css-loader的返回值： css-loader返回一段JavaScript脚本，包含导入导出语句，因此你无法用eval执行获取结果。这和其它大部分Loader在链式调用中返回文件内容不同。

// Imports
import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from "../node_modules/css-loader/dist/runtime/noSourceMaps.js";
import ___CSS_LOADER_API_IMPORT___ from "../node_modules/css-loader/dist/runtime/api.js";
import ___CSS_LOADER_GET_URL_IMPORT___ from "../node_modules/css-loader/dist/runtime/getUrl.js";
var ___CSS_LOADER_URL_IMPORT_0___ = new URL("./assets/development.png", import.meta.url);
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);       
// Module
___CSS_LOADER_EXPORT___.push([module.id, `.test {
  width: 100%;
  height: 100%;
  background-image: url(${___CSS_LOADER_URL_REPLACEMENT_0___})
}
`, ""]);
// Exports
export default ___CSS_LOADER_EXPORT___;

注意：其实问题就是在style-loader中怎么引入css-loader返回的脚本的导出值。在Loader函数中你无法通过入参和this上的属性来获取导出值的路径

module.exports = function () {};
module.exports.pitch = function (remainingRequest) {
  // 通过Pitch Loader获取内联Loader调用目标文件的形式
  // 通过引用内联Loader，你可以获取css-loader脚本的导出值
  const relativePath = remainingRequest
    .split("!")
    .map((str) => this.utils.contextify(this.context, str))
    .join("!");

  // 获取css-loader脚本的导出值，在Loader函数中获取不到内联函数调用形式  
  const script = `
          import result from '!!${relativePath}'
          const style = document.createElement('style');
          style.innerHTML = result;
          document.head.append(style)
      `;

  // 终止后续loader执行
  return script;
};

2.Plugin

2.1 Plugin作用

扩展Webpack的功能。

2.2 Plugin简介

2.2.1 Plugin原理

Plugin在Webpack工作流程插入操作来扩展Webpack功能。

2.2.2 Webpack钩子

1.钩子

Webpack暴露若干种钩子，表示Webpack工作的不同阶段。

Plugin可以通过注册钩子插入Webpack工作流程。

2.Tapable

Tapable是Webpack内部引用的一个库，帮助Webpack使用钩子。

Tapable对开发者无感知，Webpack包装了Tapable的某些方法供开发者注册钩子。

tap： 注册同步钩子和异步钩子

tapAsync： 回调方式注册异步钩子

tapPromise： Promise方式注册异步钩子

2.2.3 Webpack构建对象

1.Compiler

Webpack工作时创建Compiler对象，保存了webpack.config.js等配置信息。

Compiler在API形式定制Webpack和Plugin开发时会用到。

compiler.options： webpack.config.js中的配置信息

compiler.inputFileSystem和compiler.outputFileSystem： 进行文件操作，类似fs

compiler.hooks： 注册钩子到整个打包过程

2.Compilation

Webpack工作时创建Compilation对象，保存了对模块编译的信息。

Compilation在Plugin开发时会用到。

compilation.modules： 访问遇到的模块(文件)

compilation.chunks： 访问遇到的chunks

compilation.assets： 访问遇到的资源文件

compilation.hooks： 注册钩子到编译过程

2.2.4 Webpack生命周期

Webpack生命周期可以通过钩子描述，下面结合Compiler和Compilation的常用钩子描述Webpack生命周期

compiler.initialize： 初始化。

compiler.run： 开始构建。

compiler.compilation： 创建编译实例。

compiler.make： 开始一次编译 （每个文件编译时会触发，包括下述红色部分）。

compilation.buildModule： 构建模块。

compilation.seal： 构建完成。

compilation.optimize： 模块优化。

compiler.afterCompile： 所有文件编译完成。

compiler.emit： 输出资源。

compiler.done： 构建过程完成。

2.3 Plugin开发

2.3.1 Plugin模式

调用方式： Plugin以构造函数调用

核心方法： Plugin的核心方法是constructor和apply

constructor： Webpack加载webpack.config.js的配置时调用每个plugin的constructor

apply： Webpack生成配置对象compiler后调用plugin实例的apply方法
class TestPlugin {
    constructor() {
        console.log('TestPlugin constructor')
    }

    apply(compiler) {
        console.log('TestPlugin apply')
    }
}

module.exports = TestPlugin

2.3.2 Plugin钩子

注册方式： Plugin钩子在apply中注册
钩子执行： 钩子执行分为同步，异步串行，异步并行。执行方式由钩子说明文档决定。

1.异步串行

注：每个钩子执行完毕后才能执行下一个钩子，钩子的执行会阻塞Webpack的构建过程

// compiler.emit钩子文档描述是异步串行
compiler.hooks.emit.tap("TestPlugin", (compilation) => {
    // 参数是compilation，可以以此注册compilation钩子
    console.log("TestPlugin emit sync");
});

compiler.hooks.emit.tapAsync("TestPlugin", (compilation, callback) => {
    setTimeout(() => {
        console.log("TestPlugin emit async");
        callback();
    }, 10000);
});

compiler.hooks.emit.tapPromise("TestPlugin", (compilation) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("TestPlugin emit promise");
            resolve();
        }, 2000)
    });
});

2.异步并行

注：每个钩子同时触发

// compiler.make钩子文档描述是异步并行
compiler.hooks.make.tapAsync("TestPlugin", (compilation, callback) => {
    setTimeout(() => {
        console.log("TestPlugin make async1");
        callback();
    }, 3000);
});

compiler.hooks.make.tapAsync("TestPlugin", (compilation, callback) => {
    setTimeout(() => {
        console.log("TestPlugin make async2");
        callback();
    }, 1000);
});

2.3.3 banner-webpack-plugin

获取文件资源： 通过 compilation.assets对象获取键名来得知文件名
追加内容： 设置 compilation.assets[key]为对象，实现 source方法和 size方法来描述输出文件

// 给文件添加注释的插件
class BannerWebpackPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync(
      "BannerWebpackPlugin",
      (compilation, callback) => {
        // 1.获取输出的文件资源。只保留js和css资源
        const assets = Object.keys(compilation.assets).filter((assetPath) => {
          const extensions = ["css", "js"];
          const typeName = assetPath.split(".").slice(-1).join("");
          return extensions.includes(typeName);
        });

        // 资源内容上追加内容
        const prefix = `
        /*
          Author: xxx
        */
        `;

        // 2.在文件上追加内容
        assets.forEach((asset) => {
          // 获取原来内容
          const source = compilation.assets[asset].source();
          // 新内容
          const content = prefix + source;
          compilation.assets[asset] = {
            // 最终资源输出时调用source方法
            source() {
              return content;
            },
            // 资源大小
            size() {
              return content.length;
            },
          };
        });

        callback();
      }
    );
  }
}

module.exports = BannerWebpackPlugin;

2.3.4 clean-webpack-plugin

webpack4中有该插件，但是webpack5内置了该功能。在此尝试实现clean-webpack-plugin。

获取webpack.config.js配置： compiler.options
获取文件操作工具： fs = compiler.outputFileSystem
获取目录下文件和文件夹： fs.readdirSync
获取文件状态： fs.statSync
判断文件是否是目录： fs.isDirectory
删除文件： fs.unlinkSync

// 清理上次打包内容插件
class CleanWebpackPlugin {
  apply(compiler) {
    // 打包输出目录
    const outputPath = compiler.options.output.path;
    // 类似于fs
    const fs = compiler.outputFileSystem;

    compiler.hooks.emit.tap("CleanWebpackPlugin", (compilation) => {
      this.removeFiles(fs, outputPath);
    });
  }

  removeFiles(fs, filePath) {
    // 读取目录下所有文件和文件夹
    const files = fs.readdirSync(filePath);

    files.forEach((file) => {
      const path = `${filePath}/${file}`;
      //  分析文件状态
      const fileStat = fs.statSync(path);
      // 判断是否是文件夹（是文件夹则先删除子文件）
      if (fileStat.isDirectory()) {
        this.removeFiles(fs, path);
      } else {
        // 同步删除方法
        fs.unlinkSync(path);
      }
    });
  }
}

module.exports = CleanWebpackPlugin;

2.3.5 analyze-webpack-plugin

实现一个文件大小分析插件。实现需要API可以参考banner-webpack-plugin。

// 分析文件资源大小插件
class AnalyzeWebpackPlugin {
apply(compiler) {
 compiler.hooks.emit.tap("AnalyzeWebpackPlugin", (compilation) => {
   // 1.分析输出资源大小
   const assets = Object.entries(compilation.assets);

   // 2.生成分析md文件
   const baseContent = `| 资源名称 | 资源大小 |\n | --- | --- |`;
   const content = assets.reduce((content, [filename, file]) => {
     return content + `\n| ${filename} | ${file.size()} |`;
   }, baseContent);

   // 3.输出分析md文件
   compilation.assets["analyze.md"] = {
     source() {
       return content;
     },
     size() {
       return content.length;
     },
   };
 });
}
}

module.exports = AnalyzeWebpackPlugin;

2.3.6 inlineChunk-webpack-plugin

作用

配置了runtimeChunk后webpack打包生成的runtime文件可能非常小，可以考虑直接内联注入到index.html入口中。

思路

因为输出index.html是html-webpack-plugin。因此需要借助这个插件向index.html中追加内容

实现

内联runtime文件中的内容到index.html
删除打包后产生的runtime.js文件

const HtmlWebpackPlugin = require("safe-require")("html-webpack-plugin");

class InlineChunkWebpackPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap(
      "InlineChunkWebpackPlugin",
      (compilation) => {
        // 1.获取html-webpack-plugin内部的自定义hooks
        const hooks = HtmlWebpackPlugin.getHooks(compilation);

        // 2.根据其文档注册alterAssetTagGroups钩子（此时要标签已经分好组），将runtime内容内联到index.html
        hooks.alterAssetTagGroups.tap("InlineChunkWebpackPlugin", (assets) => {
          /*  headTags
                [
                    {
                        tagName: 'script',
                        voidTag: false,
                        meta: { plugin: 'html-webpack-plugin' },
                        attributes: { defer: true, src: 'jsruntime~main.js.js' }
                    }
                ] 
          */

          // 处理头部标签和身体标签（不确定runtime.js会被html-webpack-plugin放到哪个部分）
          assets.headTags = this.getInlineChunk(
            assets.headTags,
            compilation.assets
          );
          assets.bodyTags = this.getInlineChunk(
            assets.bodyTags,
            compilation.assets
          );
        });

        // 3.根据其文档注册afterEmit钩子（此时已经输出资源），将产生的runtime.js删除
        hooks.afterEmit.tap("InlineChunkWebpackPlugin", () => {
          Object.keys(compilation.assets).forEach((filePath) => {
            if (/runtime(.*)\.js$/g.test(filePath))
              delete compilation.assets[filePath];
          });
        });
      }
    );
  }

  getInlineChunk(tags, assets) {
    return tags.map((tag) => {
      // 不是script标签不处理
      if (tag.tagName !== "script") return tag;

      // 获取文件资源路径
      const filePath = tag.attributes.src;
      if (!filePath) return tag;

      // 不是runtime文件不处理
      if (!/runtime(.*)\.js$/g.test(filePath)) return tag;

      return {
        tagName: "script",
        // assets是通过compilation获取文件资源
        innerHTML: assets[filePath].source(),
        closeTag: true,
      };
    });
  }
}

module.exports = InlineChunkWebpackPlugin;

3.调试

在构建工具中调试

1.构建工具代码中设置debugger断点

2.配置调试指令文章来源地址https://www.toymoban.com/news/detail-854976.html

-brk： 在第一行代码停下来

cli.js： 运行cli.js通过webpack脚手架启动webpack
{
    "scripts": {
        "debug": "node --inspect-brk ./node_modules/webpack-cli/bin/cli.js"
    }
}