webpack多页运用架构系列（一）：一步一步处理架构痛点

2024年2月7日 302次阅读 来源: array_huang

本文首发于
Array_Huang的手艺博客——
有用至上，非经作者赞同，请勿转载。

原文地点：
https://segmentfault.com/a/1190000006843916

假如您对本系列文章感兴趣，迎接关注定阅这里：
https://segmentfault.com/blog/array_huang

这系列文章讲什么？

本系列文章重要引见怎样用webpack这一当前盛行的构建东西来设想一个多页运用的架构。请注意，本文并不是新手教程，着重点更多是在于供应处理问题的思绪，而非手把手带你装逼。

作者引见

本人供职于某互联网物流公司，专职前端，公司虽仍处于创业阶段，但产品线已拉得挺长的了，因而所遇到的痒点、痛点也不少。我本是PHPer身世，对传统前端茹毛饮血的景况咬牙切齿，幸得webpack这一神器，我觉得如今写前端已跟写PHP差不多了（大误）。

示例代码

诸位看本系列文章，搭配我的脚手架项目食用更佳哦（笑）：Array-Huang/webpack-seed(https://github.com/Array-Huang/webpack-seed)。
上个文件目次构造让人人一睹为快：

├─build # 编译后天生的一切代码、资本（图片、字体等，虽然只是简朴的从源目次迁徙过来）
├─node_modules # 应用npm治理的一切包及其依靠
├─vendor # 一切不能用npm治理的第三方库
├─.babelrc # babel的设置文件
├─.eslintrc # ESLint的设置文件
├─index.html # 仅作为重定向运用
├─package.json # npm的设置文件
├─webpack.config.js # webpack的设置文件
├─src # 当前项目的源码
    ├─pages # 各个页面独占的部份，如进口文件、只要该页面运用到的css、模板文件等
    │  ├─alert # 营业模块
    │  │  └─index # 详细页面
    │  ├─index # 营业模块
    │  │  ├─index # 详细页面
    │  │  └─login # 详细页面
    │  │      └─templates # 假如一个页面的HTML比较庞杂，能够分红多块再拼在一起
    │  └─user # 营业模块
    │      ├─edit-password # 详细页面
    │      └─modify-info # 详细页面
    └─public-resource # 各个页面运用到的大众资本
        ├─components # 组件，能够是纯HTML，也能够包括js/css/image等，看自身须要
        │  ├─footer # 页尾
        │  ├─header # 页头
        │  ├─side-menu # 侧边栏
        │  └─top-nav # 顶部菜单
        ├─config # 种种设置文件
        ├─iconfont # iconfont的字体文件
        ├─imgs # 公用的图片资本
        ├─layout # UI规划，构造各个组件拼起来，因应须要能够有差别的规划套路
        │  ├─layout # 详细的规划套路
        │  └─layout-without-nav # 详细的规划套路
        ├─less # less文件，用sass的也能够，又或者是纯css
        │  ├─base-dir
        │  ├─components-dir # 假如组件自身不须要js的，那末要加载组件的css比较难题，我发起能够直接用less来加载
        │  └─base.less # 构造一切的less文件
        ├─libs # 与营业逻辑无关的库都能够放到这里
        └─logic # 营业逻辑

架构痛点痒点一览（并不是系列文章的一切内容）

  • SPA好庞杂，我照样喜好传统的多页运用怎样破？又或是，我司项目须要后端衬着，页面模板怎样出？
  • 每一个页面雷同的UI规划好难保护，UI轻微改一点就要到每一个页面去改，好贫苦还轻易漏，怎样破？
  • 除js外的资本如css/less、图片、swf、字体等，要怎样打包呢？不然总是要外部援用，迁徙、布置起来都好贫苦呢。
  • 某些年久失修的jQuery插件怎样在webpack里运用呢？
  • 能不能整合进ESLint来搜检语法？
  • 能不能整合postcss来增强浏览器兼容性？
  • 布置代码的时刻怎样消灭用户浏览器遗留下来的上个版本的缓存？

后续生长

我置信，架构不是一挥而就的，而是一个不停迭代的历程，每跨过一个坑、每处理一个痛点痒点，都能使架构越发硬朗。

附系列文章目次（同步更新）

webpack多页运用架构系列（二）：webpack设置经常使用部份有哪些？:https://segmentfault.com/a/1190000006863968

本文首发于
Array_Huang的手艺博客——
有用至上，非经作者赞同，请勿转载。

原文地点：
https://segmentfault.com/a/1190000006843916

假如您对本系列文章感兴趣，迎接关注定阅这里：
https://segmentfault.com/blog/array_huang

    原文作者：array_huang
    原文地址: https://segmentfault.com/a/1190000006843916
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞