{"id":14976324,"url":"https://github.com/array-huang/webpack-seed","last_synced_at":"2025-04-12T18:50:47.694Z","repository":{"id":149056600,"uuid":"67402768","full_name":"Array-Huang/webpack-seed","owner":"Array-Huang","description":"这是一个基于webpack的多页应用脚手架","archived":false,"fork":false,"pushed_at":"2018-02-01T04:02:23.000Z","size":1729,"stargazers_count":1182,"open_issues_count":15,"forks_count":281,"subscribers_count":61,"default_branch":"master","last_synced_at":"2025-04-03T21:14:12.573Z","etag":null,"topics":["multi-page","webpack","webpack2"],"latest_commit_sha":null,"homepage":"https://segmentfault.com/a/1190000006843916","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Array-Huang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2016-09-05T08:32:02.000Z","updated_at":"2025-02-12T09:30:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"5f339094-b778-4fe9-a594-231d15ec123e","html_url":"https://github.com/Array-Huang/webpack-seed","commit_stats":{"total_commits":81,"total_committers":3,"mean_commits":27.0,"dds":"0.49382716049382713","last_synced_commit":"511480ba0ffd9c4153c1a2e5e7b79550aac6d2e2"},"previous_names":[],"tags_count":21,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Array-Huang%2Fwebpack-seed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Array-Huang%2Fwebpack-seed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Array-Huang%2Fwebpack-seed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Array-Huang%2Fwebpack-seed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Array-Huang","download_url":"https://codeload.github.com/Array-Huang/webpack-seed/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248618222,"owners_count":21134199,"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","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":["multi-page","webpack","webpack2"],"created_at":"2024-09-24T13:53:42.845Z","updated_at":"2025-04-12T18:50:47.673Z","avatar_url":"https://github.com/Array-Huang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack-seed\n\n## 注意\n本项目master分支已升级到`webpack2`版本，如需查看`webpack1`版本，请查看[webpack1_version](https://github.com/Array-Huang/webpack-seed/tree/webpack1_version)分支。\n\n## 项目介绍\n本项目是一个基于webpack架构的**web app**脚手架，其特点如下：\n- 更适合多页应用。\n- 既可实现全后端分离，也可以生成后端渲染所需要的模板。\n- 引入layout和component的概念，方便多页面间对布局、组件的重用，妈妈再也不用担心我是选SPA呢还是Iframe了，咱们都！不！需！要！\n- 编译后的程序不依赖于外部的资源（包括css、font、图片等资源都做了迁移），可以整体放到CDN上。\n- 整合Bootstrap3及主题SB-Admin，但其实换掉也很简单，或者干脆不用CSS框架也行。\n- 不含Js框架（jQuery不算框架，谢谢）。\n- 本项目基于 ***webpack v2*** 和 ***webpack-dev-server v2***，全局和项目局部依赖都一样。\n\n## 使用说明\n- 本项目使用包管理工具NPM，因此需要先把本项目所依赖的包下载下来：\n```\n$ npm install\n```\n\n- 启动服务器，推荐直接使用webpack-dev-server\n```\n$ npm run start\n```\n\n- 理论上来说，webpack-dev-server会自动帮你打开浏览器并展示示例页面；如果没有的话，请手动打开浏览器，在地址栏里输入`http://localhost:8080`，Duang！页面就出来了！\n\n## CLI命令(npm scripts)\n| 命令            | 作用\u0026效果          |\n| --------------- | ------------- |\n| npm run build   | 根据`webpack.config.js`，build出一份生产环境的代码 |\n| npm run dev     | 根据`webpack.dev.config.js`，build出一份开发环境的代码 |\n| npm run start   | 开启webpack-dev-server并自动打开浏览器，自动监测源码变动并实现LiveReload，**推荐实际开发时使用此项** |\n| npm run profile | 显示编译过程中每一项资源的耗时，用来调优的 |\n| npm run dll     | 生成Dll文件，每次升级第三方库时都需要重新执行一遍 |\n| npm run analyse  | 生成打包文件结构的可视化分析报告；注意请在`npm run build`或`npm run dev`后再执行 |\n| npm run analyze | 作用同上 |\n\n## 目录结构说明\n```\n├─build # 编译后生成的所有代码、资源（图片、字体等，虽然只是简单的从源目录迁移过来）\n├─node_modules # 利用npm管理的所有包及其依赖\n├─vendor # 所有不能用npm管理的第三方库\n├─.babelrc # babel的配置文件\n├─.eslintrc # ESLint的配置文件\n├─index.html # 仅作为重定向使用\n├─package.json # npm的配置文件\n├─webpack-config # 存放分拆后的webpack配置文件\n│   ├─base # 主要是存放一些变量\n│   ├─inherit # 存放生产环境和开发环境相同的部分，以供继承\n│   └─vendor # 存放webpack兼容第三方库所需的配置文件\n├─webpack.config.js # 生产环境的webpack配置文件（无实质内容，仅为组织整理）\n├─webpack.dev.config.js # 开发环境的webpack配置文件（无实质内容，仅为组织整理）\n├─src # 当前项目的源码\n    ├─pages # 各个页面独有的部分，如入口文件、只有该页面使用到的css、模板文件等\n    │  ├─alert # 业务模块\n    │  │  └─index # 具体页面\n    │  ├─index # 业务模块\n    │  │  ├─index # 具体页面\n    │  │  └─login # 具体页面\n    │  │      └─templates # 如果一个页面的HTML比较复杂，可以分成多块再拼在一起\n    │  └─user # 业务模块\n    │      ├─edit-password # 具体页面\n    │      └─modify-info # 具体页面\n    └─public-resource # 各个页面使用到的公共资源\n        ├─components # 组件，可以是纯HTML，也可以包含js/css/image等，看自己需要\n        │  ├─footer # 页尾\n        │  ├─header # 页头\n        │  ├─side-menu # 侧边栏\n        │  └─top-nav # 顶部菜单\n        ├─config # 各种配置文件\n        ├─iconfont # iconfont的字体文件\n        ├─imgs # 公用的图片资源\n        ├─layout # UI布局，组织各个组件拼起来，因应需要可以有不同的布局套路\n        │  ├─layout # 具体的布局套路\n        │  └─layout-without-nav # 具体的布局套路\n        ├─less # less文件，用sass的也可以，又或者是纯css\n        │  ├─base-dir\n        │  ├─components-dir # 如果组件本身不需要js的，那么要加载组件的css比较困难，我建议可以直接用less来加载\n        │  └─base.less # 组织所有的less文件\n        ├─libs # 与业务逻辑无关的库都可以放到这里\n        └─logic # 业务逻辑\n```\n\n## 更新日志\n### 2.1.0 (2017-07-26)\n更新了一批浏览器缓存相关配置，详情请看[webpack多页应用架构系列（十六）：善用浏览器缓存，该去则去，该留则留](https://segmentfault.com/a/1190000010317802)\n\n### 2.0.0 (2017-03-05)\nwebpack及webpack-dev-server升级到v2版本，并相应修改webpack配置文件。\n\n### 1.4.1 (2017-01-24)\n支持js/css/less文件的热更新，但暂未支持模板文件。\n\n### 1.3.1 (2016-12-01)\n改为利用`webpack --json`来生成**webpack-bundle-analyzer**生成包文件结构的可视化分析报告所需的json文件。\n\n### 1.3.0 (2016-11-22)\n引入**webpack-bundle-analyzer**，用以生成打包文件结构的可视化分析报告。\n\n### 2.0.0 (2016-10-21)\n把基础设施从项目里抽离出来，实现多项目共用同一套架构/基础设施。由于本项目肩负有教程示例的责任，且2.x版本变化极大，因此另辟一个新repo（[Array-Huang/webpack-seed-v2](https://github.com/Array-Huang/webpack-seed-v2)）来放置。\n\n### 1.2.2 (2016-10-16)\n考虑到多个页面可能会共用html/js/css（例如**添加页面**和**修改页面**），在自动查找页面入口时，忽略以`_`开头的目录，因此，可以使用以`_`开头的目录来放置页面复用的资源。\n\n### 1.2.0 (2016-10-14)\n利用[`isaacs/node-glob`](https://github.com/isaacs/node-glob)根据约定好的文件目录结构自动查找页面入口，取代过去手动指定的做法（但如果在调试过程中希望只编译某些页面，仍然可以通过手动指定来实现）。\n\n### 1.1.0\n引入Dll的概念，将第三方库进行预打包，那么在打包我们的业务代码的时候，就不需要重复打包这些第三方库了。这尤其能提现在bootstrap上，可以省一大半的时间。\n- 如果修改了Dll所包含的第三方库，比如说升级之类的，请使用`npm run dll`重新打包Dll文件。注意：系统会在打包Dll前先清空Dll目录。\n- 如果重新打包了Dll，那么也请重新打包你的业务代码，使用`npm run build`或`npm run dev`。\n\n### 1.0.2\n- 编译文件前先清空build目录。\n- 分拆webpack配置文件，避免配置文件日益臃肿。\n- 分开生产环境和开发环境的webpack配置文件。其中，`npm run build`会调用生产环境的webpack配置文件(webpack.config.js)，而`npm run dev`和`npm run watch`会调用开发环境的配置文件。\n\n### 1.0.0\n由于此脚手架已具备投入生产环境的能力，故直接定义版本号为1.0.0","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farray-huang%2Fwebpack-seed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farray-huang%2Fwebpack-seed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farray-huang%2Fwebpack-seed/lists"}