前言
对于前端开发者来说，打包工具是必不可少的工具之一。常见的打包工具有 webpack、Rollup、Parcel 等。但是，这些打包工具需要配置大量的参数，对于新手来说可能不太友好。在这篇文章中，我们介绍一个比较简单易用的 npm 包 app-bundler。
什么是 app-bundler
app-bundler 是一个基于 webpack 构建的打包工具，它专为小型项目和新手打造。与其它大型打包工具相比，app-bundler 小巧、易于使用，零配置，只需简单几步即可完成打包工作。
app-bundler 的优点
- 零配置：不需要配置任何参数，只需简单几步即可完成打包工作。
- 简单易用：适合小型项目和新手开发者使用。
- 快速构建：采用 webpack 4 进行快速构建。
如何安装 app-bundler
通过 npm 安装 app-bundler：
npm install app-bundler -g
如何使用 app-bundler
使用 app-bundler 非常简单，只需在项目目录下创建一个 index.html 文件和一个 entry.js 文件，然后在终端中运行以下命令即可：
app-bundler
app-bundler 会自动进行打包，打包后的文件会默认输出到 dist 目录中。
示例代码
index.html
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ ------------
-------
------
---- -------------------
------- ------------------------------
-------
-------entry.js
document.getElementById('content').innerHTML = '<h1>Hello, app-bundler!</h1>';高级用法
在默认情况下，app-bundler 会使用 webpack 的默认配置进行打包。但是，有时候需要对 app-bundler 进行进一步的配置，以满足项目的需要。在这里，我们介绍如何对 app-bundler 进行高级配置。
首先，需要在项目根目录下新建一个 app-bundler.config.js 文件，然后按照以下格式进行配置：
module.exports = {
// webpack 配置
webpackConfig: {
// ...
},
// 其他配置
// ...
}其中，webpackConfig 是 webpack 的配置选项，其他的配置选项可以参考 官方文档。
例如，以下是一个使用了自定义配置的 app-bundler.config.js 文件：
-- -------------------- ---- -------
-------------- - -
-------------- -
------- -
------ -
-
----- ---------
---- ------------
-
-
-
--
------- -
--------- -----------
-
-在这个例子中，我们配置了一个加载 .txt 文件的规则，并将打包后的文件输出为 bundle.js。
总结
本文介绍了一个简单易用的 npm 包 app-bundler，并给出了详细的使用教程和示例代码。虽然 app-bundler 可能不太适合大型项目，但对于小型项目和新手开发者来说，是一个非常不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68514