前端开发中，webpack 已经成为了必不可少的工具之一，而 broccoli-webpack-fast 这个 npm 包则是一个可以让你更加高效地使用 webpack 的工具。本文将会详细介绍如何使用 broccoli-webpack-fast。
安装
首先需要全局安装 broccoli 和 broccoli-cli：
npm install -g broccoli npm install -g broccoli-cli
然后安装 broccoli-webpack-fast：
npm install --save-dev broccoli-webpack-fast
使用
使用 broccoli-webpack-fast 的前置条件是需要一个 webpack 配置文件，这里以简单的示例来说明。
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
}
}接着，在 Brocfile.js 中使用 broccoli-webpack-fast：
// Brocfile.js
const BroccoliWebpackFast = require('broccoli-webpack-fast')
const config = require('./webpack.config.js')
module.exports = BroccoliWebpackFast('app', ['src'], config)以上代码定义了一个名字为 app 的 Broccoli 插件，并指定了输入目录为 src，输出目录为默认的 dist。
然后可以执行 broccoli serve 命令来运行开发服务器：
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
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
}
}Brocfile.js
const BroccoliWebpackFast = require('broccoli-webpack-fast')
const config = require('./webpack.config.js')
module.exports = BroccoliWebpackFast('app', ['src'], config)/src/index.js
console.log('Hello Broccoli!');执行 broccoli serve 命令之后，在浏览器中访问 http://localhost:4200，控制台输出 Hello Broccoli! 即为成功。
总结
使用 broccoli-webpack-fast 可以使得 webpack 构建前端项目更加高效，尤其是在大型项目中效果更加突出。同时，理解 Broccoli 的增量编译机制也是很有意义的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde51a4