学习 Webpack 概念并创建自定义 Webpack 插件。

在本文中，我将介绍 Webpack 的核心概念，这将有助于我们理解其基本机制，并在构建自定义 Webpack 插件之前提供更清晰的思路。接下来，让我们深入探讨细节。

为什么我们需要 webpack？

由于浏览器功能的增强、JavaScript 引擎的加速以及 iPad 等移动设备的普及，客户端倾向于编写更多的 JS 代码，这无疑将开发趋势从服务器端转向了客户端。
这导致客户端需要编写更多的 JS 代码、模块和依赖项，而这些代码、模块和依赖项之间会相互依赖。

例如，假设一个文件index.js导入了另外两个文件file1.js和，file2.js并且file2.js依赖于file1.js。在这种情况下，浏览器如何知道首先加载哪个文件才能产生所需的结果。

解决方案

Webpack！💫

那么接下来的问题是webpack是如何帮我们解决这个问题的呢？

Webpack 是一个模块打包器，它同步构建和加载模块。它将依赖项转换为模块，并确保在正确的时间、正确的范围内提取依赖项和模块。所有依赖项和模块都加载到一个文件中，并进行下载。

这是对 webpack 的基本解释，但让我们了解一下 webpack 实际上是如何完成所有这些工作的。

webpack 如何在顶层工作？

在本节中，我们将讨论在我们的文件中使用的初始配置webpack.config.js来设置我们的客户端应用程序。

入口- 它用作其依赖图的入口点并根据需要创建模块。

上面的示例bootstrap.min.ts是第一个加载并启动应用程序的文件。Webpack 将使用此文件来构建依赖关系图。

输出- 它定义分发捆绑包的绝对路径。

加载器- 它告诉 JavaScript 如何在模块中使用非 JavaScript 模块后解析它们。它获取资源文件并返回修改后的状态。

modules: {
    rules: {
        {
            test: /\.ts$\,
            use: 'ts-loader'
        }
    }
}

类似地，您还可以使用更多加载器，例如 css、babel 等。除 js 之外的所有文件都会通过这些函数式转换以某种形式转换为 JavaScript 模块。您还可以使用exclude、include、enforce等属性来筛选这些模块
。此外，还有一种链接加载器的方法，执行同一操作的加载器只需转换一次，然后就可以将它们链接在一起。

rules: [{
    test: /\.less$\, 
    use: ['css-loader', 'style-loader', 'less-loader']
}]

插件- 插件是一个 ES5 类，它实现了一个 apply 函数，允许你钩住整个编译生命周期。编译器使用它来触发事件。它会将新实例添加到配置对象中的 plugin 键中。

var HelloWorldPlugin = require('hello-world');

module.exports = {
  // ... configuration settings here ...
  plugins: [new HelloWorldPlugin({ options: true })]
};

这主要涵盖了 webpack 在底层所做的工作。https: //webpack.js.org/concepts/上有多个概念，你可以在开发应用程序时使用。

webpack 内部是如何运作的？

在本节中，我们将讨论 Webpack 的架构以及它作为系统打包工具的工作原理。为了理解这一点，我们先来回答一个问题：“什么是Tapable？”

可点击

它是插件系统的骨干。它允许我们将你的代码与现有类混合，并使用现有函数，例如 apply plugins parallel 或 apply plugins async 等，并像 Node 事件发射器一样发出我们正在监听的事件。例如，简单的基本插件声明如下：

class BasicPlugin {
    apply(compiler) {
        compiler.apply('make', (compilation) => {
            console.log('I now have access to the compilation!!!!!!');
        });
    }
}

module.exports = BasicPlugin;

Tapable 实例是一个继承自 Tapable 的类/对象，你可以用它来插入内容。有一些 Tapable 实例负责 webpack 的工作。

编译器——它是中央调度，它是一种启动或停止，它委托在 webpack 运行或完成时发生的顶级事件并暴露出来。
编译- 它创建并运行依赖图算法，并作为 webpack 背后的大脑，负责编译过程中的操作和发生的情况。
解析器——它通过它所做的工作来证明这个术语，它主要帮助查找文件和依赖项，例如，您index.js使用部分路径或任何其他依赖项指定的导入，解析器有助于从部分文件路径导入的信息中找到文件并构建依赖关系图。
模块工厂- 它接受已解析的请求并收集该文件的源并返回模块对象。
解析器- 它将原始源代码转换为 AST，以便于遍历。它首先查找所有依赖项，导入并创建依赖项对象。
模板- 它负责为您的模块绑定数据并创建我们在包中看到的代码。

总结一下整个过程。

Webpack 首先读取入口点，并通过解析器验证其是否存在。之后，它会读取我们普通的模块对象，并将其传递给解析器。解析器识别出依赖项类型后，如果是非 JavaScript 模块，它会将其传递给加载器；如果是 JavaScript 模块，它只会收集依赖项并将其附加到模块上。然后，我们必须再次检查模块中是否存在依赖项，并将其传递给解析器，之后整个循环重复，直到构建完整的依赖关系图。

通过这个，你已经了解了 webpack 的内部工作原理。😁 💃

在下一篇文章中，我将介绍如何创建我的第一个 webpack 插件来解决我在构建 chrome 扩展期间遇到的一个问题。

祝您阅读愉快！📖

文章来源：https://dev.to/jasmin/learning-webpack-concepts-and-creating-your-custom-webpack-plugin-gal