{"id":19006598,"url":"https://github.com/deepred5/webpack4-boilerplate","last_synced_at":"2026-03-06T16:03:09.370Z","repository":{"id":39421809,"uuid":"202747204","full_name":"deepred5/webpack4-boilerplate","owner":"deepred5","description":"webpack4打包模板","archived":false,"fork":false,"pushed_at":"2023-01-01T10:20:40.000Z","size":1957,"stargazers_count":37,"open_issues_count":18,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-22T19:46:53.984Z","etag":null,"topics":["bolierplate","react","webpack","webpack4"],"latest_commit_sha":null,"homepage":"","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/deepred5.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":"2019-08-16T14:58:32.000Z","updated_at":"2024-03-27T14:35:46.000Z","dependencies_parsed_at":"2023-01-31T21:46:31.916Z","dependency_job_id":null,"html_url":"https://github.com/deepred5/webpack4-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/deepred5/webpack4-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepred5%2Fwebpack4-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepred5%2Fwebpack4-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepred5%2Fwebpack4-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepred5%2Fwebpack4-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deepred5","download_url":"https://codeload.github.com/deepred5/webpack4-boilerplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepred5%2Fwebpack4-boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30184884,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T14:42:24.748Z","status":"ssl_error","status_checked_at":"2026-03-06T14:42:14.925Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["bolierplate","react","webpack","webpack4"],"created_at":"2024-11-08T18:33:12.426Z","updated_at":"2026-03-06T16:03:09.350Z","avatar_url":"https://github.com/deepred5.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack4-boilerplate\nwebpack4 多页面打包模板\n\n* 支持React\n* 支持scss, autoprefixer自动加浏览器前缀, icon字体图标\n* ES6+语法 babel编译成 ES5语法 \n* 提取公共css和js，自动添加版本号\n* 打包压缩js和css\n* Mock数据 接口转发\n\n### 使用\n安装\n```\nnpm install\n```\n\n开发(默认开启本地mock)\n```\nnpm run dev\n```\n预览: http://localhost:9001/trade-index\n\n关闭mock\n```\nnpm run dev:no-mock\n```\n\n接口代理(关闭本地mock，开启远程代理，用于后端联调)\n```\nnpm run proxy\n```\n\n打包\n```\nnpm run build\n```\n\n自定义打包目录\n```\nnpm run dev:custom\n```\n开发阶段，如果`page`目录下页面过多，会导致打包缓慢，影响开发效率。可以新建一个`customPages.json`指定开发阶段需要打包的页面\n```json\n{\n  \"pages\": [\n    \"trade-index\",\n    \"trade-success\"\n  ]\n}\n```\n\n### 说明\n***\n`pages`目录下，每个文件夹为单独的一个页面\n\n每个页面至少有两个文件配置:\n\n`app.js`: 页面的逻辑入口\n\n`index.html`: 页面的html打包模板\n\n***\n\n`assets`目录下，放静态资源，比如图片资源\n\n***\n`styles`目录下，放公共全局的css\n***\n\n可以自行添加文件夹，比如全局的`components`公共组件, `utils`全局工具方法\n***\n`mock`目录为本地mock数据，文档详见[mocker-api](https://github.com/jaywcjlove/mocker-api)\n***\n`build`目录为webpack打包配置，有详细的注解\n\n代码分割使用的是`splitChunks`配置\n```javascript\noptimization: {\n    splitChunks: {\n      cacheGroups: {\n        // 打包业务中公共代码\n        common: {\n          name: \"common\",\n          chunks: \"initial\",\n          minSize: 1,\n          priority: 0,\n          minChunks: 3, // 同时引用了3次才打包\n        },\n        // 打包node_modules中的文件\n        vendor: {\n          name: \"vendor\",\n          test: /[\\\\/]node_modules[\\\\/]/,\n          chunks: \"initial\",\n          priority: 10,\n          minChunks: 2, // 同时引用了2次才打包\n        }\n      }\n    }\n  }\n```\n接口代理详见`devServerProxy.js`\n```javascript\nconst proxy = {\n  '/api': {\n    target: 'https://anata.me', // 后端地址\n    changeOrigin: true,\n    secure: false,\n  },\n}\n```\n\n### 其他\n* 移动端定制,参考项目分支[feature/mobile](https://github.com/deepred5/webpack4-boilerplate/tree/feature/mobile)\n* 使用dll加快打包速度,参考项目分支[feature/dll](https://github.com/deepred5/webpack4-boilerplate/tree/feature/dll)\n* 使用[prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin)预渲染,参考项目分支[feature/prerender](https://github.com/deepred5/webpack4-boilerplate/tree/feature/prerender)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepred5%2Fwebpack4-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeepred5%2Fwebpack4-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepred5%2Fwebpack4-boilerplate/lists"}