本文首发于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
如果觉得我的文章对你有用,请随意赞赏
已赞赏

57 条评论
naphy · 2016年09月30日

文章很实用,必须赞一个!最近才在学 webpack,很多概念很模糊,尤其是这一条 “项目需要后端渲染,页面模板怎么出?” 这个痛点仍然困扰着我,后端渲染页面的话,是前后端共同维护页面,那么 webpack 如何结合到里面去呢?

+2 回复

0
array_huang 作者 · 2017年02月13日
长腿欧巴 · 2017年08月16日

楼主,跪求webpack性能优化方面的文章。

+2 回复

小白爱提问 · 2016年11月18日

虽然没看,但我感觉很厉害!

+1 回复

小白爱提问 · 2016年11月18日

刚才在GitHub下载了源码,按着教程运行了一下结果悲剧了:
events.js:160

  throw er; // Unhandled 'error' event
  ^

Error: listen EADDRINUSE 127.0.0.1:8080

at Object.exports._errnoException (util.js:1026:11)
at exports._exceptionWithHostPort (util.js:1049:20)
at Server._listen2 (net.js:1257:14)
at listen (net.js:1293:10)
at net.js:1403:9
at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:62:16)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:81:10)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "D:\ProgramFiles\Node.js\node.exe" "D:\ProgramFiles\Node.js\node_modules\npm\bin\npm-cli.js" "run" "start"
npm ERR! node v6.8.0
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! webpack-seed@1 .2.2 start: webpack-dev-server --inline --progress --compress --devtool eval --content-base build/
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-seed@1 .2.2 start script 'webpack-dev-server --inline --progress --compress --devtool eval --content-base build/'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the webpack-seed package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server --inline --progress --compress --devtool eval --content-base build/
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs webpack-seed
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls webpack-seed
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:UsersAdminDesktopwebpack-seed-masternpm-debug.log

救命啊!

+1 回复

0

端口被占用了

这小雨落尽 · 2017年11月26日
web前端大叔 · 2016年11月22日

上面的都是我们公司的痛点,现在正准备一个一个的改

+1 回复

心情 · 2016年12月18日

现在的心情好像捡到 九阳神功 [手动开心]

+1 回复

wweggplant · 2017年10月17日

楼主你好,根据你的脚手架,我自己稍微改了一些,用pug作为模板 https://github.com/wweggplant... ,还请指教,在此表示感谢呀

+1 回复

下雨天才有好心情 · 2016年09月09日

帮大忙了 在学react正想做个多页面的不知道怎么部署这些文件夹!一级棒

回复

array_huang 作者 · 2016年09月09日

好哩,如果有什么问题,随时可以提issue什么的。我当初本来也是在学习React的过程中接触到webpack的,只是后来发现webpack搭配上我原本的技术栈也挺好用的就先把webpack给攻下来

回复

嘻倪孢 · 2016年09月19日

大哥 请带我装逼带我飞

回复

array_huang 作者 · 2016年09月19日

[手动滑稽]

回复

嘻倪孢 · 2016年09月19日

如果我express + webpack 的多个页面应用 是不是要在入口文件那里,把所有的前端js路径都有配置进去?

回复

array_huang 作者 · 2016年09月19日

你指的是express的配置还是webpack的配置?如果是webpack的配置,那么答案是肯定的,每一个页面都是一个独立的入口,具体可看《webpack多页应用架构系列(二):webpack配置常用部分有哪些?》:https://segmentfault.com/a/11...

回复

嘻倪孢 · 2016年09月19日

正在学习webpack,很有用。感谢大神。有6篇文章 还有后续吗?

回复

array_huang 作者 · 2016年09月19日

大神不敢当哈,文章大大的有哈,而且我把这个也当做是某种研究报告来做,大概是这样的顺序:先在我的脚手架项目上做实验,再把经验写成文章,最后应用回我公司的项目里。

回复

array_huang 作者 · 2016年09月19日

如果觉得有用的话,骚年把“推荐”点起来好吗?哈哈哈哈[手动滑稽]

回复

嘻倪孢 · 2016年09月19日

ok ok

回复

array_huang 作者 · 2016年09月19日

我之前是直接在公司项目上做实验来慢慢推进架构的优化,不过这样的话每次架构一改,业务代码就会有很多东西要改,进度缓慢。现在有了我这脚手架项目作为试验品,试验起来就方便多了哈

回复

array_huang 作者 · 2016年09月30日

嘿嘿,还没写到那呢,别着急哈,先看看别的主题呗

回复

array_huang 作者 · 2016年09月30日

噢,对了,如果心急的话,也可以看我的脚手架项目,里面就有完整示例了哈:Array-Huang/webpack-seed(https://github.com/Array-Huan...

回复

载入中...
Planets
array_huang array_huang

7.5k 声望

发布于专栏

实用至上

记录和分享我在开发过程中的心得与感悟

635 人关注