前言
在前端开发中，打包工具的使用至关重要。而为了更高效的工作，我们常常需要编写自定义的打包规则来满足项目需求。本文介绍的 npm 包 fab-build-next 就是一款基于 webpack 的可扩展打包工具。
安装
fab-build-next 只支持 node.js 环境，因此需要先安装 node.js。安装完成后，打开终端并输入以下命令安装 fab-build-next：
npm install fab-build-next --save-dev
-fab-build-next 依赖 webpack 和 webpack-cli，如果你的项目中没有安装这两个依赖，fab-build-next 在安装时会默认安装它们。
基本使用
fab-build-next 提供了一个可扩展的打包方案，所以我们可以先通过其提供的默认配置进行打包。在终端中输入以下命令：
./node_modules/.bin/fab-build-next
这个命令等同于：
npx fab-build-next
在项目目录中，打包生成的文件在 dist 目录下。
另外，我们可以在项目根目录下添加 fabfile.js 文件来进行配置，其内容如下：
module.exports = {
webpack: function (config) {
//自定义 webpack 配置
return config;
}
};然后在终端中输入以下命令：
npx fab-build-next --config fabfile.js
这就使用了我们自定义的 webpack 配置。
配置项
在 fabfile.js 中，我们可以使用一些配置项来设置打包规则，以下是一些常用的配置项：
entries
type: Object
这个配置项用来设置入口文件，每个属性的 key 代表一个入口文件的名称，对应的 value 是入口文件所在的路径。如：
module.exports = {
entries: {
index: "./index.js",
page: "./page.js"
}
};output
type: Object
这个配置项用来设置打包输出目录和文件名。其中 path 是打包输出目录的绝对路径，filename 用于配置打包后文件的名字。如：
module.exports = {
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js"
}
};externals
type: Object
这个配置项用来设置外部依赖，如 lodash、react 等。如以下代码表示不打包 lodash：
module.exports = {
externals: {
lodash: "_"
}
};plugins
type: Array
这个配置项用来设置 webpack 插件。如：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-------- -
--- -------------------
------ --- -----
--------- ------------------
--
-
--示例
接下来以一个简单的 React 项目为例，详细介绍 fab-build-next 的使用。
首先，创建项目文件夹并初始化 npm。
mkdir react-project cd react-project npm init
接下来安装 React 和 ReactDOM：
npm install react react-dom
创建 src 目录并添加 index.html：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------ ---------------
-------
------
---- ---------------
------- -------------------------
-------
-------再创建 entry.js 文件：
console.log("Hello World!");以及 index.js 文件：
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("app"));创建 App.js 文件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --- ------- --------- -
-------- -
------ ---------- -------------
-
-
------ ------- ----然后安装 fab-build-next 和 webpack：
npm install fab-build-next webpack --save-dev
接下来添加 fabfile.js：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
-------- -
----- ------------
--
------- -
----- -----------------------
--------- -----------
--
-------- ---
--------------- -
------ -------
-
--在终端中输入以下命令：
npx fab-build-next --config 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