1、loader

内联的配置方式：

要实现一个自定义的 Loader，需要遵循以下步骤：

创建一个 Node.js 模块，这个模块会被 Webpack 加载和执行。你可以使用任何你熟悉的 JavaScript 工具和框架来编写这个模块。
在 Node.js 模块中实现一个函数，这个函数就是我们的 Loader 函数。这个函数应该接收一个参数，这个参数就是需要被转换的资源文件的内容。函数的返回值应该是一个字符串或者一个 JavaScript 对象。
在 Loader 函数中处理资源文件，并将其转换为 JavaScript 模块。你可以使用各种工具和库来完成这个过程，例如正则表达式、解析器等等。
导出你的 Loader 函数。你可以使用 module.exports 或者 ES6 的 export 语法将 Loader 函数导出为一个模块。
在 Webpack 配置文件中配置你的 Loader。你需要在配置文件中指定需要使用的 Loader，并且为这个 Loader 指定一个唯一的名称。你可以使用数组或者对象的方式来配置多个 Loader。

下面是一个简单的示例，演示如何实现一个简单的 Loader，它会将输入的字符串转换为大写字母：

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

在 Webpack 配置文件中配置这个 Loader：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: [
          {
            loader: 'path/to/my-custom-loader'
          }
        ]
      }
    ]
  }
};

这个配置表明，当 Webpack 加载一个以 .txt 结尾的文件时，将使用我们自定义的 Loader 对文件内容进行处理。注意，path/to/my-custom-loader 是你的自定义 Loader 的文件路径。

2、plugin

常用的 Webpack 生命周期函数及其对应的插件如下：

beforeRun：在 Webpack 执行构建之前触发。通常用于清除输出目录等操作。对应的插件是 CleanWebpackPlugin。
afterEmit：在 Webpack 完成输出文件之后触发。通常用于上传文件等操作。对应的插件是 copy-webpack-plugin、zip-webpack-plugin。
done：在 Webpack 完成构建之后触发。通常用于在控制台输出统计信息。对应的插件是 webpackbar、progress-bar-webpack-plugin。
compilation：当 Webpack 开始构建一个新的 Compilation 时触发。对应的插件是 webpack-bundle-analyzer、webpack-notifier。
emit：在 Webpack 输出资源到输出目录之前触发。对应的插件是 html-webpack-plugin、mini-css-extract-plugin。
normalModuleFactory：当 Webpack 开始创建一个新的模块时触发。对应的插件是 ignore-emit-webpack-plugin、dependency-cruiser。

需要注意的是，Webpack 生命周期函数的名称可能会随着 Webpack 版本的变化而发生变化。在选择插件时，需要根据实际的 Webpack 版本和需求进行选择。

要实现一个 Webpack 插件，需要遵循以下步骤：

创建一个 JavaScript 模块。这个模块应该导出一个函数，并且这个函数的参数应该是一个 Webpack 的 Compiler 对象。
在这个函数中，为 Compiler 对象添加一个或多个事件监听器。这些事件监听器会在 Webpack 执行不同的阶段触发。
在事件监听器中编写自定义的处理逻辑，以实现特定的功能。可以使用 Webpack 提供的 API 来读取和修改编译结果。
将插件导出为一个模块，以便在 Webpack 配置文件中使用。

下面是一个简单的 Webpack 插件示例，它会在 Webpack 构建完成时，在控制台输出构建结果的信息：

class MyPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('MyPlugin', (stats) => {
      console.log(stats.toString());
    });
  }
}

module.exports = MyPlugin;

这个插件实现了一个事件监听器，它监听 done 事件，并在事件触发时，在控制台输出 Webpack 的构建结果信息。

在 Webpack 配置文件中使用这个插件：

const MyPlugin = require('./path/to/my-plugin.js');

module.exports = {
  // ...
  plugins: [
    new MyPlugin()
  ]
};

这个配置表明，在 Webpack 执行构建时，会使用我们编写的 MyPlugin 插件。注意，path/to/my-plugin.js 是你的插件文件的路径。

补充：

1、Tapable是什么？

Webpack 是一个基于 Node.js 的静态模块打包器，用于将 JavaScript 模块打包成一个或多个文件，使其可以在浏览器中运行。Tapable 是 Webpack 中的一个插件架构，用于在 Webpack 构建过程中执行插件的钩子函数。

2、webpack插件中的apply(compiler)

在 Webpack 插件开发中，每个插件都是一个 JavaScript 类，该类需要实现一个 apply 方法。apply 方法在 Webpack 启动时被调用，并接收一个 Webpack Compiler 实例作为参数。

Compiler 是 Webpack 的核心编译器，它负责编译、打包、优化和输出最终的资源文件。在 apply 方法中，插件可以通过监听 Compiler 实例的事件来干预 Webpack 编译的各个阶段，并且可以通过 Compiler 实例的 API 来操作编译过程中的数据和状态。

例如，插件可以通过监听 Compiler 实例的 beforeCompile 事件来在 Webpack 编译前进行一些操作，比如清空输出目录、生成一些额外的资源等；也可以通过监听 Compiler 实例的 emit 事件来在 Webpack 编译完成后进行一些操作，比如生成一些额外的输出文件、修改资源文件的内容等。

3、tap方法的作用及参数

hook.tap(name, callback);

在 Webpack 中，tap 方法用于向某个钩子注册插件。tap 方法接收两个参数，第一个参数是插件的名称，第二个参数是回调函数。回调函数的参数根据不同的钩子而有所不同，通常会传递一些与编译过程相关的数据和状态。

webpack的loader和plugin区别，及实现demo

1、loader

2、plugin

猜你喜欢