前端工程目录

目前来说，按照概念，“前端工程”至少应该是要解决以下几个方面的问题：
1、提供项目开发所需的一整套运行环境，这和IDE作用类似，由于前端开发的特殊性，这个“IDE”是一个集成了多种语言和工具的开发环境；
2、资源管理，包括资源获取、依赖处理、实时更新、按需加载、公共模块管理等。这里也可以看成是组件化和模块化；
3、打通研发链路的各个环节，debug、mock、proxy、test、build、deploy等，达到一次安装，自动打包的目的。
4、解决前端性能问题，尤其是移动前端页面的性能优化，实现组件化开发。
所以，一个典型的webapp项目目录是这样的(注：此目录图来自基于webpack搭建前端工程解决方案探索)：

- webapp/               # webapp根目录
  - src/                # 开发目录
    + css/              # css资源目录
    + img/              # webapp图片资源目录
    - js/               # webapp js&jsx资源目录
      - components/     # 标准组件存放目录
          - foo/        # 组件foo
            + css/      # 组件foo的样式
            + js/       # 组件foo的逻辑
            + tmpl/     # 组件foo的模板
            index.js    # 组件foo的入口
          + bar/        # 组件bar
      + lib/            # 第三方纯js库
      ...               # 根据项目需要任意添加的代码目录
    + tmpl/             # webapp前端模板资源目录
    a.html              # webapp入口文件a
    b.html              # webapp入口文件b
  - assets/             # 编译输出目录，即发布目录
    + js/               # 编译输出的js目录
    + img/              # 编译输出的图片目录
    + css/              # 编译输出的css目录
    a.html              # 编译输出的入口a
    b.html              # 编译处理后的入口b
  + mock/               # 假数据目录
  app.js                # 本地server入口
  routes.js             # 本地路由配置
  webpack.config.js     # webpack配置文件
  gulpfile.js           # gulp任务配置
  package.json          # 项目配置
  README.md             # 项目说明

这个目录是由开发环境(配置工具)自动生成的，这个项目目录基本上体现了资源管理、模块管理、调试、打包、发布这几个重要环节。