Webpack 是一个现代化的前端打包工具，用于将代码和资源打包成一个或多个访问更快的单个文件。它通常用于打包应用程序，但也可以用于打包库以便其他人使用。
在本文中，我将向你展示如何使用 Webpack 打包你的库，并使其适合作为一个独立的 JavaScript 包被共享和使用。
准备工作
在开始之前，确保你已经安装了 Node.js 和 npm。如果你还没有安装，请先参考这个文档 安装 Node.js 和 npm。
接下来，我们需要初始化一个新的 npm 包。在你的终端中运行以下命令：
--- ----
它将引导你创建一个名为 package.json 的文件，其中包含了你的包的元数据，例如名称、版本号和依赖项。
安装和配置 Webpack
我们现在需要安装 Webpack。在终端中运行以下命令：
--- ------- ------- ----------- ----------
这将安装 Webpack 和 Webpack 命令行工具。
接下来，创建一个名为 webpack.config.js 的文件，并将以下内容添加到其中：
----- ---- - ----------------
-------------- - -
----- -------------
------ -----------------
------- -
----- ----------------------- --------
--------- ----------------
-------- -------------
-------------- ------
------------- -------
--
--这会告诉 Webpack，在 ./src/index.js 文件中找到你的库的入口点，并将它打包成名为 my-library.js 的文件。
library 和 libraryTarget 是用来告诉 Webpack 如何打包你的库作为一个包。library 设置为 my-library，因此我们可以稍后在消费这个包时引用它。
libraryTarget 是指定打包的类型，可选有 umd、commonjs、commonjs2、amd、window、assign、this、self、global、jsonp，这里我们使用 umd 以便它适用于多种环境。
globalObject 是允许在不同的环境中正确地访问库的全局对象。这里我们使用了 this。
创建你的库
现在，让我们开始编写你的库代码。
在 src 文件夹中创建一个名为 index.js 的文件，并编写一些代码。例如：
------ -------- ------ -- - ------ - - -- - ------ -------- ----------- -- - ------ - - -- -
我们用 export 关键字导出了两个函数，用于在我们的库中做一些数学计算。
打包你的库
通过运行以下命令，我们可以构建我们的库：
-------
它将基于我们在 webpack.config.js 文件中为我们的库设置的所有选项来构建我们的代码。
完成后，你的文件将打包至 dist/my-library.js 中。
在其他项目中使用你的库
你已经成功打包了你的库。现在，让我们尝试在其他项目中使用它。
首先，在其他 npm 项目中安装你的库：
--- ------- ---------- ------
在你的 HTML 文件或 JavaScript 项目中添加以下代码：
----- --------- - ---------------------- -- --- ---- --------- --------- ---------------- --- -- ------- - --------------------- --- -- ------- -
你现在应该能够成功使用你的库了。
总结
在本文中，我们学习了如何使用 Webpack 打包一个 JavaScript 库。我们设置了 Webpack 的配置文件，并写了一些代码来构建我们的库。我们还学会了如何在其他项目中使用我们的库。
使用 Webpack 打包库是分享你的代码的一种优秀方式。它告诉其他人如何使用你的代码，并确保了它们将正确地被加载和使用。注意，在打包库之前，请确保设置了正确的选项，并且你的库是干净、遵循最佳实践的，确保它可以被使用和维护。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6476968b968c7c53b0342988