在前端开发中，构建工具是必不可少的一部分，它能够自动化完成许多繁琐的操作，提高我们的效率。而 orange-build-cli 就是一款基于 Webpack 的构建工具，它能够帮我们自动化完成打包、压缩、添加前缀等操作。本文将介绍如何使用 npm 包 orange-build-cli 进行前端工程化构建。
安装
首先，我们需要在全局安装 orange-build-cli。打开终端，输入以下命令：
--- ------- -- ----------------
使用
安装完成后，我们就可以使用 orange-build-cli 进行构建了。在终端输入：
---
可以看到 orange-build-cli 提供了以下命令：
help：查看命令帮助init：在当前目录下创建默认的 orange-build 工程模板build：构建项目dev：启动开发模式，即热更新模式
init
执行 obc init 命令可以在当前目录下创建默认的 orange-build 工程模板，我们可以在该模板基础上进行开发。在执行命令后，会提示创建项目的相关信息，如下图：
按照提示信息输入后，就可以自动创建出项目所需的文件和目录。
build
执行 obc build 命令可以构建项目，该命令会自动读取项目中的 webpack.config.js 文件进行构建。构建完成后，可以在项目的 dist 目录下看到相应的构建文件。
dev
执行 obc dev 命令可以启动开发模式，即热更新模式。在开发模式中，每次修改文件后，该文件会自动重新构建，我们无需手动执行构建命令，提高了开发效率。
配置
在使用 orange-build-cli 进行构建时，我们可以通过修改 webpack.config.js 文件进行配置。以下为一个简单的示例：
-------------- - -
------ -----------------
------- -
--------- ------------
----- --------- - -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- --------------
--
-
----- ---------
---- ---------------- -------------
-
-
-
-在以上示例中，我们配置了入口文件为 ./src/index.js，输出文件为 ./dist/bundle.js；使用了 babel-loader 将 ES6 代码转换为 ES5 代码，同时使用 css-loader 和 style-loader 处理了样式文件。
总结
通过本文的介绍，我们可以知道如何使用 orange-build-cli 进行前端工程化构建；同时，我们还可以通过修改 webpack.config.js 文件进行项目构建的配置，提高我们的开发效率。通过学习 orange-build-cli 的使用，我们可以更好地涉足前端工程化的领域。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668f4d9381d61a3540e5f