GitChat: 使用 webpack 开发企业官网

最近我厂官网改版，我尝试用 Webpack 重建了开发工具链，效果不错，配置代码少了很多，逻辑更加简单清晰。我觉得值得拿出来分享一下。

文章已经发布，慢慢写了将近5w字，干货很多，覆盖面很广，欢迎大家前去阅读：升级工具链吧！使用 Webpack 开发企业官网。感谢大家的支持。

交流应该会通过直播进行，暂定7月中吧，斗鱼直播间：douyu.tv/meathill。

前言

Webpack 的核心是“pack”，“打包”。打包的依据是 JS，任何在 JS 里引用的资源，都接受 webpack 的管理，会被放在合适的位置，得到合适的加载。在早期 Web 开发当中，一个组件可能同时需求 HTML + CSS + JS + 字体 + 图片 + 其它资源，全部手动管理非常费劲，各种引用，各种复制，还常常在部署的时候出问题。有了 webpack 之后简直不要太轻松，还有 webpack-dev-server 支持自动刷新，所以在新项目中我几乎都会用 webpack。

在 SPA 项目中，使用 webpack 很顺畅，但是在企业官网项目里，webpack 就显得有些鸡肋了：

1. 企业官网重展示轻功能，没有复杂的交互，基本都是静态 HTML
2. 很多页面，比如“关于我们”、“产品介绍”，并不需要 JS；即使用到 JS，也多半只是很简单的交互
3. 需要 i18n

所以我之前选用 gulp 工具链，逻辑并不复杂，但是因为全部资源都要自己管理，代码就很多，维护起来比较麻烦，协作也不容易。而且：

1. 没有 dev-server 和自动刷新
2. 生成大量的临时文件
3. 部署的路径变化时，改动很大，隐患很多

分享重点

这次下定决心用 webpack 重构，踩了不少坑，摸索了不少新方式，最终效果比较理想。本次分享，将重点讲解以下内容：

1. Webpack 基础知识
2. Webpack 配置进阶，如何配置多页面项目
3. 使用 Pug 编写页面逻辑，完成 i18n
4. 使用 Stylus 写样式
5. 使用 Lighthouse 优化页面
6. 编写 webpack 插件

面向读者

这次会尽量写的浅显易懂，内容尽可能全面

1. 网页重构工程师（页面仔）
2. 想要学习完整网页制作知识的同学
3. 其它想充分了解前端工具链的同学

---

今年会争取每个月在 GitChat 上创作一篇长文，如果你有什么想学的，可以告诉我哦。感谢支持。