简介
bon 是一个基于 webpack 的前端打包工具，它提供了一系列优秀的功能，如代码压缩、图片压缩、CSS 合并、代码分析等等，使得开发者能够更加高效地进行项目开发。本文将为大家提供 bon 的使用教程，并介绍其中一些值得注意的地方。
安装
使用 bon 前需要先安装 webpack，如果你已经安装了 webpack，那么可以直接使用以下命令安装 bon：
$ npm install bon --save-dev
配置
在使用 bon 前，需要对其进行一些配置。通常，我们会在项目根目录下创建一个名为 webpack.config.js 的文件，并在其中进行相关配置。下面是一个示例配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- --------- - ------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
---- ---------------
-------- --------------
--
-
----- ---------
---- -
---------------
------------
-
--
-
----- ----------------------
---- -
-
------- --------------
--
--
--
-
--
-------- -
--- ----------------------------------
--- -----------
-
--在这个配置中，我们定义了一个入口文件 ./src/index.js，一个输出文件 dist/bundle.js，并配置了一些 loader 和 plugin。其中，BonPlugin 是我们需要配置的 bon 插件。
使用
在完成了配置后，我们就可以使用 bon 命令进行打包了。以下是一个常用的命令示例：
$ npx bon --config webpack.config.js
需要注意的是，我们需要使用 npx 命令而不是直接使用 bon 命令。npx 会自动查找当前项目中安装的 bon 包，以及 webpack 包，从而保证了代码的正确运行。
总结
通过以上的介绍，相信大家已经能够初步了解 bon 的使用方法以及基本配置方法。如果想要深入了解 bon 的高级用法，可以查看官方文档，或者参考其它优秀的前端开发者的博客。希望这篇文章能够对大家有一定的指导意义，帮助大家更加高效地进行前端开发。
示例代码
为了帮助大家更好地理解文章内容，这里提供一份示例代码，该代码将会合并所有的 css 文件，并将 png、jpg、gif 图片进行压缩。请按照以上的教程，将以下的代码复制到你的 webpack.config.js 文件中进行配置。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- --------- - ------------------------------
----- ----------------- - ---------------------------------------
----- ------------------ - --------------------------------
----- ----------------- - ----------------------------------------------
----- -------------- - -------------------------------------------
----- --------------- - ----------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
---- ---------------
-------- --------------
--
-
----- ---------
---- ---------------------------
--------- ---------------
---- -
-
------- -------------
-------- -
--------- ----
-
-
-
--
--
-
----- ----------------------
---- -
-
------- --------------
-------- -
----- ---------------
----------- ------
-
--
-
------- -----------------------
-------- -
-------- -
------------ -----
-------- --
--
-------- -
-------- ------
--
--------- -
-------- --------
------ -
--
--------- -
----------- ------
--
----- -
-------- --
-
--
--
--
--
-
--
-------- -
--- -----------------------------
--- -------------------------------
--- ----------------------------------
--- ------------
--- --------------------
--- ----------------
----- --------------------------
-------- -
-----------------
-------- ---
------------ ----
--
-
--
-
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c81ccdc64669dde4c97