{"id":18409402,"url":"https://github.com/be-fe/html-bundler","last_synced_at":"2025-10-28T11:12:34.772Z","repository":{"id":83506224,"uuid":"79920851","full_name":"be-fe/html-bundler","owner":"be-fe","description":"html-bundler","archived":false,"fork":false,"pushed_at":"2018-07-20T09:46:11.000Z","size":133,"stargazers_count":95,"open_issues_count":7,"forks_count":18,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-04-07T09:39:06.056Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/be-fe.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-24T14:51:26.000Z","updated_at":"2022-04-21T05:47:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"1358fd17-235a-4e31-955c-603ad3d63be7","html_url":"https://github.com/be-fe/html-bundler","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/be-fe/html-bundler","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/be-fe%2Fhtml-bundler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/be-fe%2Fhtml-bundler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/be-fe%2Fhtml-bundler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/be-fe%2Fhtml-bundler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/be-fe","download_url":"https://codeload.github.com/be-fe/html-bundler/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/be-fe%2Fhtml-bundler/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281426285,"owners_count":26499191,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-28T02:00:06.022Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T03:25:04.923Z","updated_at":"2025-10-28T11:12:34.730Z","avatar_url":"https://github.com/be-fe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# html-bundler\n\n### 面临的业务困境\n\n### Why html-bundler\n目前最流行的打包工具是webpack和gulp，都有着良好的生态和海量的用户，但是在我们使用的过程中发现了以下一些问题：\n\n- webpack的上手难度较高,配置和学习成本都很高\n- 所有资源都用webpack打包的情况下性能较差，比如改行样式等10秒这种非常常见\n- gulp虽然上手简单，但是插件众多，如何进行选择和最佳实践是一个大问题\n- 每做一个项目都需要修改构建程序.\n\nhtml-bundler的特点：\n\n- html-bundler以html为入口文件，自动寻找引入的资源文件进行构建处理，这对绝大多数项目是通用的.\n- 通过一个简单易理解的配置文件使得构建流程可配置。\n- 一些简单的项目可以直接只做简单的less =\u003e css转换，production模式进行压缩合并以及版本号处理即可\n- 复杂的项目则引入webpack对js进行模块化的处理，并暴露接口让用户自己修改webpack配置文件\n- 集成了一些优化和日志工具，提升构建的性能和可维护性\n\n\n\n### Globle Mod\n适用于一些只需要简单压缩合并的活动项目，或者一些demo页\n\n```sh\nnpm install html-bundler -g\n```\n\n```sh\nhb create project\nhb create project -w //add webpack.config.js local\n```\n\n\n```sh\ncd project \u0026\u0026 npm install\n```\n\n\n```sh\nhb dev -p 8080\n```\n\n\n```sh\nhb dest\n```\n\n### Local Mod\n适用于正式项目\n\n```sh\ncd your-project\nnpm install html-bundler --save-dev\n```\n\n自动生成html-bundler.config.js\n\n```sh\nnpm install html-bundler -g\nhb init\nhb init -w  //自动生成webpack.config.js\n```\n\ncreate a js file (e.g: bundle.js)and write:\n\n```js\nrequire('html-bundler')\n\n```\n\n```sh\nnode bundle.js dev -p 8080\n```\n\n```sh\nnode bundle.js dest\n```\n\n### 配置文件解析\n```js\n/* eslint-disable */\nmodule.exports = {\n    src: './src',                               //源代码所在路径\n\n    entries: ['./src/html/**', './src/*.html'], //html入口文件\n\n    ignore: ['./src/js/lib', './src/css/lib'],  //不进行任何处理的路径\n\n    imgFolder: './src/imgs',                    //图片目录\n\n    moveList: ['./src/fonts', './src/a.js'],    //需要平移的目录和文件\n\n    devMod: {                                   //开发模式\n        output: './dev',                        //开发模式下打包后的输出位置\n        minify: false,                          //是否最小化，如果开启，则js、css都会进行压缩\n        minifyHTML: false,                      //是否压缩html，如果开启，则会对html文件进行压缩\n        bundle: true,                           //是否使用webpack进行打包\n        concat: false,                          //是否合并文件\n        sourcemap: true,                        //是否进行sourcemap\n        less: true,                             //是否进行less预处理\n        inline: false,                          //是否把所有资源打成inline（目前不能和bundle配合使用）\n        watchFolder: {                          //文件分类进行监听，这样修改js不会编译css，提高性能\n            css: ['./src/css'],\n            js: ['./src/js'],\n            imgs: ['./src/imgs'],\n            html: ['./src/html']\n        },\n        custom: {                               //自定义任务, 格式样例[{func: sass, opts: {logger: true}}, {func: task, opts: null }]\n            js: [],\n            css: [],\n            imgs: [],\n            html: []\n        },\n        server: true,                           //是否开启server，默认集成gulp-connect，如果配置为'bird',则使用bird。\n        buildTarget: 'default'                  //buildTarget用于设置dist后的目录结构，如果选择default,则默认为css, js, html,如果是一个对象，则表示自定义，不过目前只支持按照文件类型进行分类。\n    },\n\n    destMod: {                                  //生产模式，配置项和开发模式完全相同\n        output: './dist',\n        minify: true,\n        minifyHTML: true,\n        bundle: true,\n        concat: true,\n        less: true,\n        inline: false,\n        sourcemap: false,\n        watchFolder: null,\n        custom: {\n            js: [],\n            css: [],\n            imgs: [],\n            html: []\n        },\n        server: false,\n        buildTarget: {\n            js: './js/',\n            css: './css/',\n            imgs: './images/',\n            html: './html/'\n        },\n    },\n\n    rdMod: {\n        //rd环境配置项,内容同上\n    },\n\n    qaMod: {\n        //qa环境配置项,内容同上\n    },\n\n    birdConfig: {                               //bird 配置项\n        basePath: \"./dev\",\n        targetServer: {\n            port: \"8276\",\n            host: \"your server host\",\n            headers: {\n                cookie: \"\"\n            }\n        },\n        ajaxOnly: false\n    },\n\n    serverConfig: {                             //gulp connect 配置项\n        root: './dev'\n    }\n}\n\n```\n\n### DLL优化\n如果你使用webpack模块化开发模式，一些基础依赖库如果也每次构建，会大大拖慢构建的速度，因此我们引入了webpack的dll插件。\n\n##### step1\n修改webpack.dll.js文件中的vendors数组，将依赖放进数组\n\n```js\nconst vendors = [];\n```\n\n##### step2\n执行\n\n```sh\nnpm run dll\n```\n生成`manifest.json`文件和`src/lib/vendors.js`文件\n\n##### step3\n\n在html文件中引入`../lib/vendors.js`文件，放在其他js文件之前\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbe-fe%2Fhtml-bundler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbe-fe%2Fhtml-bundler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbe-fe%2Fhtml-bundler/lists"}