简介
前端开发者在项目中需要打包、编译、压缩等操作。npm（node 包管理工具）上有许多工具包，如 webpack、gulp 等。本文介绍另一款 npm 包——@5studio/bundler，它是一个轻量级的 webpack 封装包，方便使用且可灵活配置。
安装
npm install @5studio/bundler
使用
基本使用
在项目的根目录下创建一个名为 config.js 的配置文件，然后在命令行输入：
npx 5studio-bundler -c config.js
这样便通过 config.js 中的配置文件对项目进行打包。
配置文件
在 config.js 中输入以下代码作为模板：
-- -------------------- ---- ------- ----- ---- - ---------------- -------------- - - ------ ----------------------- ------------------ ------- - ----- ----------------------- ---------- --------- ------------ -- --展开代码
以上代码中，entry 指向入口文件，output 为输出文件，其中 filename 可以自定义。
此外还可以配置一些插件，如下：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ----------------- - ------------------------------- ----- ------------------ - -------------------------------- -------------- - - ------ ----------------------- ------------------ ------- - ----- ----------------------- ---------- --------- ------------ -- -------- - --- ----------------------------- --- ------------------- --------- ----------------------- ----------------------- --------- ------------- ------- ----- --- -- --展开代码
以上代码中，CleanWebpackPlugin 用于清空打包目录，HtmlWebpackPlugin 用于生成 HTML 文件并自动引入打包后的 JS 文件。
更多详细的配置项可以查看官方文档。
集成至项目
- 在
package.json中添加脚本：
"scripts": { "build": "npx 5studio-bundler -c webpack.config.js" },
- 命令行执行
npm run build便可进行打包。
结语
@5studio/bundler 是一个优秀的打包工具，不仅易于使用，还具有灵活的配置功能。希望本文对大家使用 @5studio/bundler 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/131746
