最近我厂官网改版,我尝试用 Webpack 重建了开发工具链,效果不错,配置代码少了很多,逻辑更加简单清晰。我觉得值得拿出来分享一下。
文章已经发布,慢慢写了将近5w字,干货很多,覆盖面很广,欢迎大家前去阅读:升级工具链吧!使用 Webpack 开发企业官网。感谢大家的支持。
交流应该会通过直播进行,暂定7月中吧,斗鱼直播间:douyu.tv/meathill。
前言
Webpack 的核心是“pack”,“打包”。打包的依据是 JS,任何在 JS 里引用的资源,都接受 webpack 的管理,会被放在合适的位置,得到合适的加载。在早期 Web 开发当中,一个组件可能同时需求 HTML + CSS + JS + 字体 + 图片 + 其它资源,全部手动管理非常费劲,各种引用,各种复制,还常常在部署的时候出问题。有了 webpack 之后简直不要太轻松,还有 webpack-dev-server 支持自动刷新,所以在新项目中我几乎都会用 webpack。
在 SPA 项目中,使用 webpack 很顺畅,但是在企业官网项目里,webpack 就显得有些鸡肋了:
- 企业官网重展示轻功能,没有复杂的交互,基本都是静态 HTML
- 很多页面,比如“关于我们”、“产品介绍”,并不需要 JS;即使用到 JS,也多半只是很简单的交互
- 需要 i18n
所以我之前选用 gulp 工具链,逻辑并不复杂,但是因为全部资源都要自己管理,代码就很多,维护起来比较麻烦,协作也不容易。而且:
- 没有 dev-server 和自动刷新
- 生成大量的临时文件
- 部署的路径变化时,改动很大,隐患很多
分享重点
这次下定决心用 webpack 重构,踩了不少坑,摸索了不少新方式,最终效果比较理想。本次分享,将重点讲解以下内容:
- Webpack 基础知识
- Webpack 配置进阶,如何配置多页面项目
- 使用 Pug 编写页面逻辑,完成 i18n
- 使用 Stylus 写样式
- 使用 Lighthouse 优化页面
- 编写 webpack 插件
面向读者
这次会尽量写的浅显易懂,内容尽可能全面
- 网页重构工程师(页面仔)
- 想要学习完整网页制作知识的同学
- 其它想充分了解前端工具链的同学
今年会争取每个月在 GitChat 上创作一篇长文,如果你有什么想学的,可以告诉我哦。感谢支持。
欢迎吐槽,共同进步