{"id":51043582,"url":"https://github.com/lovefishs/webpack-bootstrap","last_synced_at":"2026-06-22T12:01:50.922Z","repository":{"id":80102341,"uuid":"41774182","full_name":"lovefishs/webpack-bootstrap","owner":"lovefishs","description":"Frontend engineering solution based on webpack.","archived":false,"fork":false,"pushed_at":"2015-11-18T10:52:12.000Z","size":149,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-08-31T17:35:23.315Z","etag":null,"topics":["webpack","webpack-bootstrap"],"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/lovefishs.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}},"created_at":"2015-09-02T02:09:00.000Z","updated_at":"2019-08-15T14:43:51.000Z","dependencies_parsed_at":"2023-03-12T09:52:34.418Z","dependency_job_id":null,"html_url":"https://github.com/lovefishs/webpack-bootstrap","commit_stats":null,"previous_names":[],"tags_count":1,"template":null,"template_full_name":null,"purl":"pkg:github/lovefishs/webpack-bootstrap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lovefishs%2Fwebpack-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lovefishs%2Fwebpack-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lovefishs%2Fwebpack-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lovefishs%2Fwebpack-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lovefishs","download_url":"https://codeload.github.com/lovefishs/webpack-bootstrap/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lovefishs%2Fwebpack-bootstrap/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34647750,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-22T02:00:06.391Z","response_time":106,"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":["webpack","webpack-bootstrap"],"created_at":"2026-06-22T12:01:50.004Z","updated_at":"2026-06-22T12:01:50.913Z","avatar_url":"https://github.com/lovefishs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack-bootstrap\n\n基于 webpack + gulp 搭建前端工程解决方案模板\n\n*注:* 该模板由 [chemdemo/webpack-bootstrap](https://github.com/chemdemo/webpack-bootstrap) 修改而成,感谢原作者,详细信息请点击[基于webpack搭建前端工程解决方案探索](https://github.com/chemdemo/chemdemo.github.io/issues/10)查看\n\n### 安装软件\n  \n```bash\n# NodeJS\n$ nvm ls\n$ nvm ls-remote\n# 这里使用 4.2.1 做示范,建议使用最新稳定版\n$ nvm install v4.2.1\n$ nvm use 4.2.1\n$ nvm alias default 4.1.2\n```\n\n### 拷贝项目模板\n\n```bash\n$ clone https://github.com/lovefishs/webpack-bootstrap.git\n```\n\n### 安装依赖模块\n\n```bash\n$ cd webpack-bootstrap \u0026\u0026 npm install # 国内可以使用 cnpm install 借助淘宝 NPM 镜像站提高下载速度\n```\n\n### 相关命令\n\n```bash\n# 静态页面工程\n$ npm run client-dev   # dev\n$ npm run clinet-build # build\n\n# 也可以直接调用 gulp 启动环境\n$ gulp dev    # dev\n$ gulp build  # build\n$ gulp deploy # deploy\n\n\n# NodeJS 应用工程\n$ npm run server-dev   # development 阶段 (需要新开窗口执行 `gulp watch` 来监测 `app` 目录下相关文件的改动并且实时复制到 `dist` 目录)\n$ npm run server-start # prduction 环境\n```\n\n### 业务开发\n\n##### 目录结构\n\n```javascript\n- webapp/                       # 根目录\n  - app/                        # 开发目录\n    + css/                      # css\n    + img/                      # img\n    - js/                       # js\n      - component/              # 组件目录\n        - foo/                  # 组件: foo\n          foo.css               # 组件样式\n          util.js               # 组件工具函数\n          foo.tpl               # 组件模板\n          foo.js                # 组件js\n        + bar/                  # 组件: bar\n      ...                       # 根据项目需要任意添加的代码目录\n    + lib/                      # 非模块化第三方依赖库\n    + font/                     # 字体目录\n    + helper/                   # handlebars helper 目录\n    index.html                  # index 入口文件\n    404.html                    # 404 page\n  - bin/                        # CLI\n    www                         # 启动文件\n  - dist/                       # 编译输出目录\n    + css/                      # 编译输出的css目录\n    + img/                      # 编译输出的图片目录\n    + js/                       # 编译输出的js目录\n    + lib/                      # 非模块化第三方依赖库\n    + font/                     # 编译输出的font目录\n    index.html                  # index 压缩过的入口文件\n    404.html                    # 404 page\n  + node_modules/               # CommonJS模块(通过 npm 安装,使用 import 方式引用)\n  - server                      # 服务端\n    routes.js                   # 服务端路由\n    server.js                   # 服务端启动文件\n  .gitignore                    # gitignore\n  .jshintrc                     # js hint config\n  gulpfile.js                   # gulp任务配置\n  package.json                  # 项目配置\n  README.md                     # 项目说明\n  webpack-common.config.js      # webpack公共配置文件\n  webpack-dev.config.js         # webpack开发配置文件\n  webpack.config.js             # webpack生产配置文件\n```\n\n##### 单/多页面支持\n\n约定 `/app/*.html` 为应用的入口文件,在 `/app/js/` 一级目录下有一个同名的 js 文件作为该入口文件的逻辑入口(entry).\n\n在编译时会扫描入口 html 文件并且根据 webpack 配置项解决 entry 的路径依赖,同时还会对 html 文件进行压缩、字符替换等处理.\n\n这样可以做到同时支持 SPA 和多页面型的项目.\n\n支持类似 `404` 的无任何依赖的纯静态页面.\n\n### 编译\n\n```bash\n$ npm run build\n```\n\n### 部署\u0026发布\n\n纯静态页面型的应用,最简单的做法是直接把 `dist` 文件夹部署到指定机器即可(先配置好机器ip、密码、上传路径等信息):\n\n```bash\n$ npm run deploy # or run `gulp deploy`\n```\n\n如果需要将生成的js、css、图片等发布到 cdn,修改下 `publicPath` 项为目标 cdn 地址即可:\n\n```javascript\n...\noutput: {\n  ...\n  publicPath: debug ? distDir : 'http://cdn.site.com/',\n}\n...\n```\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flovefishs%2Fwebpack-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flovefishs%2Fwebpack-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flovefishs%2Fwebpack-bootstrap/lists"}