{"id":14976470,"url":"https://github.com/songyazhao/multi-page-template","last_synced_at":"2025-10-16T12:40:18.938Z","repository":{"id":143823103,"uuid":"120168048","full_name":"songyazhao/multi-page-template","owner":"songyazhao","description":"基于 Webpack3.x 开发(dev)和构建(build)Web多页面应用(普通 Web 站点) 的前端工程化方案。","archived":false,"fork":false,"pushed_at":"2018-02-10T14:27:30.000Z","size":1616,"stargazers_count":20,"open_issues_count":1,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-01T08:05:46.469Z","etag":null,"topics":["multi-page","webpack3"],"latest_commit_sha":null,"homepage":"","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/songyazhao.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":"2018-02-04T08:33:58.000Z","updated_at":"2021-12-17T18:29:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"db6543e7-e401-415e-ac8a-2881c171331e","html_url":"https://github.com/songyazhao/multi-page-template","commit_stats":{"total_commits":7,"total_committers":1,"mean_commits":7.0,"dds":0.0,"last_synced_commit":"8e46636bb6f5209d1162cf0a3159ba5cac5d5fb0"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/songyazhao%2Fmulti-page-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/songyazhao%2Fmulti-page-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/songyazhao%2Fmulti-page-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/songyazhao%2Fmulti-page-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/songyazhao","download_url":"https://codeload.github.com/songyazhao/multi-page-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238553189,"owners_count":19491384,"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","webpack3"],"created_at":"2024-09-24T13:53:56.158Z","updated_at":"2025-10-16T12:40:13.900Z","avatar_url":"https://github.com/songyazhao.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 简介\n基于 Webpack3.x 开发(dev)和构建(build)Web多页面应用(普通 Web 站点) 的前端工程化方案。\n\n## 特性\n- 前端工程化\n- 集成 PostCSS、stylus\n- 支持模块化、组件化\n- 支持开发、调试和构建\n\n## 目录结构\n```\n|-- build                             // Webpack 配置\n|-- config                            // 路径、代理域名等配置\n|-- dist                              // 构建后的代码默认存放位置，可通过config/index.js重新配置\n|-- src                               // 源码目录\n|   |-- common                        // HTML中的公用片段（比如header、footer）\n|   |-- styles                        // 全局样式\n|       |-- index                     // 样式工具集合\n|       |-- utils                     // 样式工具目录\n|           |-- functions.scss        // Stylus 函数\n|           |-- mixins.scss           // Stylus 混合\n|           |-- variables.scss        // Stylus 变量\n|   |-- utils                         // JS工具库\n|   |-- views                         // HTML页面\n|   |-- main.js                       // Webpack主入口，页面间公用的模块可放这里\n```\n\n## 使用\n#### 1. 相关命令\n```bash\n# 下载代码\n$ git clone https://github.com/songyazhao/multi-page-template.git\n# 安装依赖\n$ yarn // or `npm install`\n# 开发、调试\n$ yarn dev // or `npm run dev`\n# 构建\n$ yarn build // or `npm run build`\n```\n\n#### 2. 开发环境的访问地址\nhttp://localhost:2335/index.html\nindex.html对应 `src/views` 中的html文件\n\n#### 3. 开发自己的项目\n- 在 `src/views` 下参照 `index` 文件夹的结构创建其他页面\n\n## 添加 polyfill\n用 ES6 开发时，可按需引入 polyfill，提高浏览器兼容性。\n```bash\n# 安装 core-js\n$ yarn add core-js --save\n```\npolyfill 在 `src/main.js` 文件中引入：\n```js\nimport 'core-js/es6/promise'\n```\n\n## IE8 兼容\n添加 es3ify-webpack-plugin，解决 es3 语法兼容问题：\n```bash\n$ yarn add es3ify-webpack-plugin -D\n```\n在 `build/webpack.prod.conf.js` plugins 项中添加\n```js\nconst es3ifyPlugin = require('es3ify-webpack-plugin');\n...\nplugins: [\n  new es3ifyPlugin()\n  ...\n]\n```\n添加 es5-shim 和 es5-sham，解决 es3 环境下 es5 API 缺失问题：\n```html\n\u003c!--[if lt IE 9]\u003e\n\u003cscript src=\"//cdn.bootcss.com/es5-shim/4.5.10/es5-shim.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"//cdn.bootcss.com/es5-shim/4.5.10/es5-sham.js\"\u003e\u003c/script\u003e\n\u003c![endif]--\u003e\n```\n引入 selectivizr.js，使 IE8 支持 CSS3 伪类以及属性选择器：\n```html\n\u003c!--[if lt IE 9]\u003e\n\u003cscript src=\"//cdn.bootcss.com/nwmatcher/1.4.2/nwmatcher.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"//cdn.bootcss.com/selectivizr/1.0.2/selectivizr-min.js\"\u003e\u003c/script\u003e\n\u003c![endif]--\u003e\n```\n\u003e 如果无需兼容 IE8，请去掉以上相关操作！\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsongyazhao%2Fmulti-page-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsongyazhao%2Fmulti-page-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsongyazhao%2Fmulti-page-template/lists"}