webpack多页运用架构系列(一):一步一步处理架构痛点

本文首发于
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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注