{"id":21479402,"url":"https://github.com/meathill/gitbook-webpack-for-multi-pages","last_synced_at":"2026-04-29T13:35:31.933Z","repository":{"id":143184951,"uuid":"189866349","full_name":"meathill/gitbook-webpack-for-multi-pages","owner":"meathill","description":"A guide for how to use webpack to build a business site.","archived":false,"fork":false,"pushed_at":"2019-10-03T09:17:01.000Z","size":935,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-04-07T16:35:10.118Z","etag":null,"topics":["enterprise-official-site","gitbook","gitchat","multi-pages","webpack"],"latest_commit_sha":null,"homepage":"https://meathill.com/gitbook-webpack-for-multi-pages/","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/meathill.png","metadata":{"files":{"readme":"README.md","changelog":"history.md","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":"2019-06-02T15:56:58.000Z","updated_at":"2024-09-09T02:01:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"59d76d5d-1215-4d64-9433-83eaec2b5938","html_url":"https://github.com/meathill/gitbook-webpack-for-multi-pages","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/meathill/gitbook-webpack-for-multi-pages","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meathill%2Fgitbook-webpack-for-multi-pages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meathill%2Fgitbook-webpack-for-multi-pages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meathill%2Fgitbook-webpack-for-multi-pages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meathill%2Fgitbook-webpack-for-multi-pages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meathill","download_url":"https://codeload.github.com/meathill/gitbook-webpack-for-multi-pages/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meathill%2Fgitbook-webpack-for-multi-pages/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32427814,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T13:34:34.882Z","status":"ssl_error","status_checked_at":"2026-04-29T13:34:29.830Z","response_time":110,"last_error":"SSL_read: 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":["enterprise-official-site","gitbook","gitchat","multi-pages","webpack"],"created_at":"2024-11-23T11:25:09.027Z","updated_at":"2026-04-29T13:35:31.917Z","avatar_url":"https://github.com/meathill.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"使用 Webpack 开发多页面站点\n========\n\n前言\n========\n\n最近我厂官网改版，我尝试用 Webpack 重建了开发工具链，效果不错，配置代码少了很多，逻辑更加简单清晰。我觉得值得拿出来分享一下。\n\n\u003e 重建之前的 v1，我给同事讲解了半天，她也没搞懂；重建之后的 v2，她看了下配置文件就明白了。\n\nWebpack 的核心是“pack”，即“打包”。打包的依据是 JS，任何在 JS 里引用的资源，都接受 webpack 的管理，会被放在合适的位置，得到合适的加载。在早期 Web 开发当中，一个组件可能同时包含 HTML + CSS + JS + 字体 + 图片 + 其它资源，全部手动管理非常费劲。各种引用，各种复制，还常常在部署的时候出问题。有了 webpack 之后简直不要太轻松，还有 webpack-dev-server 支持自动刷新，所以在新项目中我几乎都会用 webpack。\n\n在 SPA 项目中，使用 webpack 很顺畅，但是在企业官网项目里，webpack 就显得有些鸡肋了：\n\n1. 企业官网重展示轻功能，没有复杂的交互，基本都是静态 HTML\n2. 很多页面，比如“关于我们”、“产品介绍”，并不需要 JS；即使用到 JS，也多半只是很简单的交互\n3. 需要国际化（i18n，生成多语言版本）\n\n所以我之前选用 gulp 工具链，逻辑并不复杂，但是因为全部资源都要自己管理，代码就很多，维护起来比较麻烦，团队协作也不容易。而且：\n\n1. 没有 dev-server 和自动刷新\n2. 生成大量的临时文件，依赖 nginx 配置服务器\n3. 部署的路径变化时，改动很大，隐患很多\n\n这次下定决心用 webpack 重构，踩了不少坑，摸索了不少新工具，最终效果比较理想。不仅解决了之前的问题，还摸索出更好的 i18n 方案，顺带学习了基于 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 创建新插件的做法，可以将页面优化进一步自动化。希望能带给大家一些帮助。\n\n本次的分享大纲\n--------\n\n本次分享，将重点讲解以下内容：\n\n1. Webpack 基础和进阶，如何配置多页面项目\n2. 使用 Pug 编写页面逻辑，完成 i18n\n3. 使用 Stylus 写样式，响应式\n4. 审计页面、优化页面\n5. 创建插件自动优化页面\n\n面向读者\n--------\n\n这次会尽量写的浅显易懂，内容尽可能全面，不过毕竟只是一次 Chat，不是一套完整的从入门到精通的实战课，所以还是需要诸位读者有一定的开发基础，能够理解范例代码；有比较良好的学习习惯，能够自行补足不具备的知识。\n\n本文主要面向：\n\n1. 网页重构工程师\n2. 想充分了解前端工具链的同学\n\n当然，大家有任何看不懂想不通的问题，也可以直接向我提问。如果大家希望看到更多细或者节更详细的教程，也不妨告诉我。\n\n名词及约定\n--------\n\n1. Webpack 每个大版本都会有一些关键性的变动，所以在尝试本文的配置时也一定要选用正确的版本。本项目在实际生产中使用的是最新的 Webapck 4.33 版本，其它依赖项，如 loader、插件都需要匹配这个核心版本。\n2. 范例代码以 ES6 为基础，也会使用 ES2017+ 新增语法，如果你对这些“新”语法不熟悉，附录里有一些资源方便你学习。\n\n### 名词：\n\n* 使用者：指用 jQuery 开发业务逻辑的人，也就是你我。\n* 经典（版）：指《设计模式》中的内容\n\n### 文中代码的目标环境：\n\n* Node.js \u003e= 12.4.0\n* Webpack \u003e= 4.33.0\n* Webpack-cli \u003e= 3.11.0\n* Babel \u003e= 7\n\n作者介绍\n--------\n\n大家好，我叫翟路佳，花名“肉山”，这个名字跟 Dota 没关系，从高中起伴随我到现在。\n\n我热爱编程，喜欢学习，喜欢分享，从业十余年，投入的比较多，学习积累到的也比较多，对前端方方面面都有所了解，希望能与大家分享。\n\n我兴趣爱好比较广泛，尤其喜欢旅游，欢迎大家相互交流。\n\n我目前就职于 OpenResty Inc.，定居广州。\n\n你可以在这里找到我：\n\n* [博客](https://blog.meathill.com/)\n* [微博](https://weibo.com/meathill)\n* [GitChat](https://gitbook.cn/gitchat/author/593cb520ef8d9c2863173543)\n\n或者通过 [邮件](mailto:meathill@gmail.com) 联系我。\n\n限于个人能力、知识视野、文字技术不足，文中难免有疏漏差错，如果你有任何疑问，欢迎在任何时间通过任何形式向我提出，我一定尽快答复修改。\n\n再次感谢大家。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeathill%2Fgitbook-webpack-for-multi-pages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeathill%2Fgitbook-webpack-for-multi-pages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeathill%2Fgitbook-webpack-for-multi-pages/lists"}