使用webpack搭建公司前端项目架构

前端架构？
呵呵！
一个公司的前端都会做整体的代码组织架构，这是一个比较成型团队需要做的。
当然很多公司都是自由射击！！！！********
但并不是所有团队都这样。
早期我们的前端架构是这样的》》

Paste_Image.png

整个前端目录分：

• fe==上线整合文件
• lib==共公文件
• md==一些备注md 文件
• ui==共公组件部分
• app==项目文件
• fe上线文件最终会包含 app lib ui文件
• app 又分：
  • demo == 各人员可以自行研究和练习的项目文件夹
  • m== 移动端项目
  • w==pc 端项目
  • wiki == 开发一些类库或公共项目的
    整个前端的代码组织架构是这样的
    那如何让其关联可使用呢
    之前的模式使用 seajs 配置根目录，开发ui.js 关联对应组件项目项目文件

比如使用一个cookie：
- seajs.use('ui/1.0.0/cookie/cookie.js',function(cookie){
- cookie('name', 'value');
- })
而项目依赖：
* var valid = require('app/w/home/js/form_valid');
依次类推
总之使用起来是比较方便的。

• 那问题来了 这页面文件加载也太多了吧。
  前期开发这样没有任何问题
  后期真要量起来了，简单优化就好
  使用方法:combo seajscombo 配合服务端
  最终显示就是ui/??a.js,b.js,c.js 这还是很不错的，好多公司都在这么使用。
  这是一种前端组织代码架构的方式。有不问题可以咨询我。
  只是个人观点，有问题可以讨论，觉得不好可以绕过。

那webpack这么火 想使用webpack 来设计整个前端组织架构如何搞？

上一种方案显然不行。
那到底怎么来，其实用webpack更方便
每个webpack的项目都是独立的，最终把相关文件打包处理
我们拿早期webpack-react的项目目录来分析一下：

image.png

项目目录：
那几个配置文件就不说了
主要就一个dev
整个项目都在dev 中：有样式 js 图片 js html
这是一个独立的项目结构，那么想用共公文件怎么办？
包！！！npm 包，
独自开发npm 然后来使用
然后再依赖
不管是共公文件还是共公组件都可以更使用。
当然这种没有添加 react angular vue omi 之类的 组件的方式
只是单纯一种结构。
。。。
后续再更新吧