构建你自己的 Webpack 插件

📦 Webpack 插件，用于扩展构建

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

在上一篇文章中，我讨论了 Webpack 的打包机制和架构。本文将重点介绍 Webpack 插件的构建，以及它如何帮助你解决打包问题。Webpack 基于插件系统构建，该系统用于 Webpack 配置，并帮助我们扩展 Webpack 的实现，而这些实现是加载器和解析器无法实现的。

我将举一个简单的插件示例，该插件接受几个参数，并在 webpack 生命周期钩子触发时打印这些参数。那么，让我们开始构建自己的 webpack 插件吧。

步骤

• 创建一个名为 my-first-webpack-plugin 的项目，并在其中安装 webpack。

mkdir my-first-webpack-plugin
npm init -y
npm install webpack webpack-cli --save-dev

• 创建一个文件my-first-webpack-plugin.js并创建一个类来定义你的插件属性。这将使你的插件与 webpack 的生命周期钩子绑定。

class MyFirstWebpackPlugin {
    constructor(options) {
        this.options = options;
    }
    apply(compiler) {
        console.log("My First webpack plugin");
    }
};

module.export = MyFirstWebpackPlugin;

该插件会在 webpack 运行时打印该语句。

• 你可以webpack.config.js通过以下方式将此插件添加到你的程序中。

const myFirstWebpackPlugin = require("./my-first-webpack-plugin.js");

module.exports = {
    entry: resolve(__dirname, "src/index.js"),
    output: {
        filename: "bundle.js"
    },
    plugins: [new myFirstWebpackPlugin()]
};

• 这是一个非常基础的插件，用于记录语句。我们可以通过传递一些选项来自定义这个插件。

class MyFirstWebpackPlugin {
    constructor(options) {
        this.options = options || {
            env: "dev"
        };
    }
    apply(compiler) {
        console.log("My First webpack plugin");
    }
};

• 插件webpack.config.js会通过参数传递。

plugins: [
    new myFirstWebpackPlugin({
        env: "staging"
    })
]

• 我们的插件已经准备就绪，让我们对其进行修改，在compiler.hooks.done发出信号时打印该语句。

apply(compiler) {
    compiler.hooks.done.tap("MyFirstWebpackPlugin", (stats) => {
        console.log(`My first webpack plugin is running on ${this.options.env}`)
        console.log("stats", stats);
    })
}

此处的统计信息将显示一个大型对象，其中包含有关编译和该钩子可用文件的所有可能详细信息。

webpack 所基于的Tapable实例由不同的部分组成，每个部分都有与之关联的不同钩子。

编译器钩子

还有许多其他钩子，例如run 、emit、beforeRun等等，我们可以将它们与插件绑定。钩子继承自 Tapable 类，用于注册和调用插件。编译器模块是主引擎，它使用传递给它的所有选项创建编译实例，大多数面向用户的插件首先在编译器上注册。

编译钩子

编译有助于模块的加载、密封、优化、分块、哈希和恢复。编译还扩展了 Tapable 的功能，并提供生命周期钩子。它可用于在模块构建之前、重新构建之后或模块构建成功之后更改模块等。

Javascript 解析器钩子

类似地，还有用于解析 webpack 处理的每个模块的JavaScript 解析器钩子。它扩展了 Tapable，可供您的自定义插件使用，以增强解析过程。您可以在这里找到更多关于解析器钩子的信息。

太棒了！！！！🎉
通过本文，你已经学会了如何创建自定义 webpack 插件。

我创建了一个自定义插件来解决我在开发 Chrome 扩展程序时遇到的一个问题。在尝试将扩展程序部署到 Web 应用商店的不同环境下时，我不得不重复一系列手动操作。每次都需要压缩 js 文件、创建源代码的 zip 文件并更改文件中的版本号manifest.json。创建 webpack 插件帮助我实现了流程自动化，并让我深入了解了打包过程以及 webpack 的工作原理和架构。

您可以在 GitHub 上查看该插件，并通过以下命令将其安装到您的项目中使用。

npm i extension-build-webpack-plugin

npm i extension-build-webpack-plugin --save-dev

const BrowserExtensionPlugin = require("extension-build-webpack-plugin");
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new

祝您阅读愉快！