什么是 gobble-webpack
gobble-webpack 是一个基于 gobble 的插件，结合了 webpack 提供了一种方便的方式将你的前端代码打包为一个或多个 bundle。利用 gobble-webpack，你可以使用 webpack 的大部分功能以及其它 webpack 插件。因此，gobble-webpack 是一个非常强大的打包工具。
如何安装 gobble-webpack
在使用 gobble-webpack 前，需要先安装 gulp。可以使用下面的命令安装 gulp：
--- ------- -------- ----
由于 gobble-webpack 是 gobble 的插件，所以还需要安装 gobble：
--- ------- ---------- ------
最后，安装 gobble-webpack：
--- ------- ---------- --------------
gobble-webpack 的基本用法
----- ------ - ------------------
----- ------- - -------------------
----- ------------- - --------------------------
----- ----- - --------------
----- ------- - -
------ -------------
------- -
----- ---------
--------- -----------
--
------- -
------ -
- ----- -------- ------- --------------- -------- -------------- -
-
--
-------- -
--- ---------------------------------
-
--
----- ------ - -------------------- ---------
-------------- - -------上面的例子将所有在 src 目录下的 JavaScript 文件打包为一个 bundle（指定为 dist/bundle.js），并压缩混淆代码。下面逐一解释这个例子中的各个部分。
引入依赖模块
----- ------ - ------------------ ----- ------- - ------------------- ----- ------------- - --------------------------
在例子中，我们使用了 gobble、webpack 和 gobble-webpack 三个模块。
创建输入源
----- ----- - --------------
gobble 提供了很多方法来创建输入源，这里我们使用了 “gobble (directory)”，读取 src 目录。
指定 webpack 的选项
----- ------- - -
------ -------------
------- -
----- ---------
--------- -----------
--
------- -
------ -
- ----- -------- ------- --------------- -------- -------------- -
-
--
-------- -
--- ---------------------------------
-
--在这个例子中，我们只指定了一些最基本的配置。可以在这里参考 webpack 的文档来深入了解各种配置选项。在这里，我们做了以下工作：
- 指定 webpack 的入口文件为 index.js
- 指定 webpack 打包后的文件名为 bundle.js，并保存到 dist 目录下
- 配置 webpack 来使用 babel 和 UglifyJsPlugin 插件
使用 gobble-webpack
----- ------ - -------------------- ---------
最后，我们将输入源 input 和 webpack 的选项 options 传给 gobble-webpack，gobble-webpack 将会自动根据指定的选项将所有文件打包成指定的 bundle 输出。
简单的示例
以下是一个较为简单的示例。该示例中的代码是一个基于 React 和 ES6 的应用程序。
让我们从依赖分析开始。我们需要使用的依赖有：
- --- ------- ---------- ------ ------------ -------------- ------- ------------ ---------- ------------------ -------------------
接下来，我们将新建一个项目目录，同时创建一个名为“src”的文件夹，下面是文件夹结构：
-
--- ----
--- -------------
--- ---
--- ----------
--- --- -------------
--- --------其中 HelloWorld.js 文件和 index.js 文件内容如下所示：
-- ------------------------
------ ----- ---- --------
------ ------- ----- ---------- ------- --------------- -
-------- -
------ ----------- -------------------------
-
-
-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ ---------- ---- --------------------------
----------------
----------- ------------ ---
------------------------------
--在 webpack 的配置文件中添加以下内容：
-- -------------
----- ------ - ------------------
----- ------- - -------------------
----- ------------- - --------------------------
----- ----------- - ------------------------
----- ----- - -------------------------------- - -------- ---------- -------- ---
----- ------ - -------------------- -
------ -------------
------- -
----- ---------
--------- -----------
--
------- -
-------- -
- ----- -------- ------- --------------- -------- -------------- -
-
--
-------- -
--- ---------------------------------
-
---
-------------- - ------------------- - -------- --------- ---几点需要注意的是：
- 在将输入源传给 gobble-webpack 之前，我们使用了 gobble-react 插件，以将包含 React 组件的输入源转换成 DOM 元素。
- 在使用了 babel-loader 来将代码转换成 ES5 让 UglifyJsPlugin 成功执行删除操作后，将返回一个空的页面。因此我们需要将输出包装到一个 div#app 容器内。另一方面，这里演示了如何使用 gobbleReact 插件。
最后，在 package.json 文件中添加以下内容：
---------- - -------- ------- ------- -------- ------- ------ -
完成以上步骤后，运行以下命令来构建和启动服务器：
- --- --- ----- -- --- --- -----
在浏览器中打开 http://localhost:4567，就可以查看打包后的网页啦！
总结
gobble-webpack 是整合了 gobble 和 webpack 的插件，支持大多数 webpack 的功能和插件，在一些特殊的场合可能会比 webpack 更为强大。在上文中，我们详细讲解了 gobble-webpack 的安装和使用，通过一个使用 React 和 ES6 的前端应用程序实践让读者更好理解 gobble-webpack 的使用思路。希望对你的前端开发有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066e71255dee6beeee7489