前言
在前端开发中，打包工具的使用至关重要。而为了更高效的工作，我们常常需要编写自定义的打包规则来满足项目需求。本文介绍的 npm 包 fab-build-next 就是一款基于 webpack 的可扩展打包工具。
安装
fab-build-next 只支持 node.js 环境，因此需要先安装 node.js。安装完成后，打开终端并输入以下命令安装 fab-build-next：
--- ------- -------------- ----------
-fab-build-next 依赖 webpack 和 webpack-cli，如果你的项目中没有安装这两个依赖，fab-build-next 在安装时会默认安装它们。
基本使用
fab-build-next 提供了一个可扩展的打包方案，所以我们可以先通过其提供的默认配置进行打包。在终端中输入以下命令：
----------------------------------
这个命令等同于：
--- --------------
在项目目录中，打包生成的文件在 dist 目录下。
另外，我们可以在项目根目录下添加 fabfile.js 文件来进行配置，其内容如下：
-------------- - -
-------- -------- -------- -
----- ------- --
------ -------
-
--然后在终端中输入以下命令：
--- -------------- -------- ----------
这就使用了我们自定义的 webpack 配置。
配置项
在 fabfile.js 中，我们可以使用一些配置项来设置打包规则，以下是一些常用的配置项：
entries
type: Object
这个配置项用来设置入口文件，每个属性的 key 代表一个入口文件的名称，对应的 value 是入口文件所在的路径。如：
-------------- - -
-------- -
------ -------------
----- -----------
-
--output
type: Object
这个配置项用来设置打包输出目录和文件名。其中 path 是打包输出目录的绝对路径，filename 用于配置打包后文件的名字。如：
-------------- - -
------- -
----- ----------------------- --------
--------- -----------
-
--externals
type: Object
这个配置项用来设置外部依赖，如 lodash、react 等。如以下代码表示不打包 lodash：
-------------- - -
---------- -
------- ---
-
--plugins
type: Array
这个配置项用来设置 webpack 插件。如：
----- ----------------- - -------------------------------
-------------- - -
-------- -
--- -------------------
------ --- -----
--------- ------------------
--
-
--示例
接下来以一个简单的 React 项目为例，详细介绍 fab-build-next 的使用。
首先，创建项目文件夹并初始化 npm。
----- ------------- -- ------------- --- ----
接下来安装 React 和 ReactDOM：
--- ------- ----- ---------
创建 src 目录并添加 index.html：
--------- -----
------
------
----- --------------- --
------------ ---------------
-------
------
---- ---------------
------- -------------------------
-------
-------再创建 entry.js 文件：
------------------ ---------
以及 index.js 文件：
------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- -------- -------------------- --- --------------------------------
创建 App.js 文件：
------ ------ - --------- - ---- --------
----- --- ------- --------- -
-------- -
------ ---------- -------------
-
-
------ ------- ----然后安装 fab-build-next 和 webpack：
--- ------- -------------- ------- ----------
接下来添加 fabfile.js：
----- ---- - ----------------
-------------- - -
-------- -
----- ------------
--
------- -
----- -----------------------
--------- -----------
--
-------- ---
--------------- -
------ -------
-
--在终端中输入以下命令：
--- -------------- -------- ----------
打包完成后，在 dist 目录下会生成 main.js 和 index.html。
最后修改 index.html：
--------- -----
------
------
----- --------------- --
------------ ---------------
-------
------
---- ---------------
------- -------------------------
-------
-------然后在浏览器中打开 index.html，会看到页面显示 “Hello World!”。
结论
本文介绍了 npm 包 fab-build-next 的使用方法和一些常用的配置项。由于 fab-build-next 可扩展，所以我们可以自定义打包规则来满足项目需求。希望读者通过本文的学习，能够更好地了解 fab-build-next，并在实际项目中得到应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/63881