前言
在日常前端开发中，经常会有一些需要使用 css 和 js 进行构建、压缩、合并等操作的需求。为了提升开发效率和代码质量，在这里我将介绍一个非常优秀的 npm 包: inf-build。
inf-build 可以帮助我们快速地完成前端开发过程中对 css 和 js 进行构建和打包的操作，使用起来非常简单，且功能十分强大。
安装
在安装 inf-build 之前，需要保证系统已经安装了 node.js 和 npm。在终端中输入以下命令即可安装 inf-build：
npm install inf-build -g
此时，inf-build 就已经成功安装到了你的电脑上。
使用
当我们需要对 css 或者 js 进行构建时，只需要在终端中输入以下命令：
inf-build
在执行完毕后，我们可以在当前工程目录下找到一个“dist”文件夹，里面就是构建后的版本。
配置
inf-build 的使用非常简单，但如果要更好地适应不同的开发需求和项目，我们需要对其进行一些配置。
webpack 配置
如果你了解 webpack，则应该知道，inf-build 也是基于 webpack 的，因此我们可以对其进行 webpack 的配置。在项目根目录下新建一个 webpack.config.js 文件，然后添加如下代码：
module.exports = {
// webpack 配置项
};这里的 webpack.config.js 文件与平常我们使用 webpack 时的配置是一样的。
自定义配置
如果你想要更细致地控制 inf-build 的行为，可以在项目根目录下添加一个“inf-build.config.js”文件。在该文件中，我们可以通过 return 一个对象来完成自定义配置，具体内容可以参考以下代码示例：
-- -------------------- ---- -------
-------------- - -------- -- -
------ -
-- ------
------ --------------------
------- -
----- --------- - ---------
--------- -----------
--
------- -
------ -
-
-- - --- - ---- -------- ------------ ----
----- ----------
------- ---------------
-------- -
-------- --------------------- -----------------------
-------- --------------------------------------------
--
--
--
--
--
--更多配置项
除了上述自定义配置外，inf-build 还提供了一些常用的配置项，比如：
- cssExtract - 是否将 css 抽离为单独的文件
- minimizer - 是否压缩文件
- cssLoaderOptions - css-loader 的配置
- jsLoaderOptions - babel-loader 的配置
- resolveAlias - 解析别名
以上几个配置项的使用也非常简单，只需要在“inf-build.config.js”中添加对应的字段即可。
结束语
以上就是对 inf-build 的使用和配置介绍，希望能够帮助到你加快项目的开发效率和代码质量，增加别人阅读的舒适度。
如果你想了解更多 inf-build 的详细用法和开发实践，可以到官网中文文档查看：https://inf-build.com/docs/zh-CN/introduction/getting-started/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725a81e8991b448e879d