前端开发中，webpack 已经成为了必不可少的工具之一，而 broccoli-webpack-fast 这个 npm 包则是一个可以让你更加高效地使用 webpack 的工具。本文将会详细介绍如何使用 broccoli-webpack-fast。
安装
首先需要全局安装 broccoli 和 broccoli-cli：
--- ------- -- -------- --- ------- -- ------------
然后安装 broccoli-webpack-fast：
--- ------- ---------- ---------------------
使用
使用 broccoli-webpack-fast 的前置条件是需要一个 webpack 配置文件，这里以简单的示例来说明。
-- -----------------
-------------- - -
------ -----------------
------- -
----- --------- - --------
--------- -----------
-
-接着，在 Brocfile.js 中使用 broccoli-webpack-fast：
-- ----------- ----- ------------------- - -------------------------------- ----- ------ - ------------------------------ -------------- - -------------------------- -------- -------
以上代码定义了一个名字为 app 的 Broccoli 插件，并指定了输入目录为 src，输出目录为默认的 dist。
然后可以执行 broccoli serve 命令来运行开发服务器：
-------- -----
此时可以在 http://localhost:4200 查看到应用运行的效果。
深入理解
Broccoli
Broccoli 是一个构建工具，主要用于前端项目的构建，和 Gulp 和 Grunt 等构建工具相比，它的优势在于增量编译，即只编译改变了的文件，而不是每次都编译所有文件，这大大加快了构建速度。
broccoli-webpack-fast
Broccoli-webpack-fast 利用 Broccoli 的强大增量编译能力，对 webpack 进行封装，可以使得 webpack 只针对改变了的文件进行重新编译。
它的使用方式非常简单，只需要定义好 webpack 配置文件，然后在 Brocfile.js 中引入并使用即可。
示例代码
这里提供一个完整的示例代码，以便更好地理解如何使用 broccoli-webpack-fast。
webpack.config.js
-------------- - -
------ -----------------
------- -
----- --------- - --------
--------- -----------
-
-Brocfile.js
----- ------------------- - -------------------------------- ----- ------ - ------------------------------ -------------- - -------------------------- -------- -------
/src/index.js
------------------ ------------
执行 broccoli serve 命令之后，在浏览器中访问 http://localhost:4200，控制台输出 Hello Broccoli! 即为成功。
总结
使用 broccoli-webpack-fast 可以使得 webpack 构建前端项目更加高效，尤其是在大型项目中效果更加突出。同时，理解 Broccoli 的增量编译机制也是很有意义的。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c89ccdc64669dde51a4