一、目录结构
src文件夹：放置业务代码
——view：页面
——page：脚本和样式
——service：数据层
——util：工具层
——image
打包到dist文件夹：
——View
——Js
——Css
——resource
二、npm
npm init ：npm初始化，在项目根目录执行，初始化成功后会在项目根目录生成package.json的npm配置文件。
npm install：安装依赖包
npm install xxx@v.v.v
npm uninstall xxx@v.v.v
相关参数：
-g：全局安装
--registry=http://registry.npm.taobao.org：制定npm源地址，npm install速度很慢时可以把npm源指向国内淘宝源
三、webpack
3.1 介绍
模块化工具
设计思想：require anything
加载方式：各种loader插件
编译方式：commonj模块-->function类型模块
官方文档：http://webpack.github.io/docs
把前端涉及到的所有文件都通过js的require组织起来，最后以js为入口；能require anything的基础就是有各种loader来引入各种文件，还可以自己写loader；webpack天生支持commonjs规范，用nodejs把commonjs规范下的模块全都转换成浏览器支持的function形式模块，再用一个模块加载器来组织这些模块。这样commonjs规范通过webpack的转换就能在浏览器运行了。
3.2 安装
npm install webpack -g：安装全局的webpack
npm install webpack@1.15.0 --save-dev：安装项目里的webpack依赖
webpack-v：查看webpack版本号
3.2.1 安装的注意事项：
1.全局安装为什么不需要版本号，安装项目依赖却需要？
npm加载原理，npm会优先选用项目本地的npm包，找不到才会去全局的npm包里找，全局安装是为了提供webpack的命令，而真正用到的是本地的1.15.0版本.
2.为什么用1.15.0版本，问什么不用2.x？
object.default属性，正常浏览器没有问题，但是在ie8会报错。
3.什么是--save-dev?
npm把包的信息存在package.json文件里记录项目的依赖。
用--save-dev安装包，包的名称和版本都会存到package.json文件的devdependences里；--save安装的会存到dependences。
devdependences放开发时的辅助工具，一般不会被打包进业务代码，比如测试工具，打包工具之类的；dependences放的是业务代码的依赖包，比如jquery。
3.3webpack的常用命令
webpack：以不压缩的形式来打包，常用于调试代码
webpack-p：做线上发布时的打包，会把所有文件都做最小化压缩。
webpack-watch：监听文件的改变而自动编译，一般用于开发过程。
webpack --config webpack.config.js：改变默认的配置文件位置
3.4webpack配置文件
比较常用的：
entry：js的入口文件
externals：外部依赖的声明
output：目标文件
resolve：配置别名
module：各种文件，各种loader
plugins：插件
3.5 webpack Loaders
3.6 webpack-dev-server
作用：前端开发服务器，启动后可以用localhost的方式访问项目
特点：文件改变，自动刷新浏览器
安装：npm install webpack-dev-server --save-dev
配置：webpack-dev-server/client?http://localhost:8088
使用：webpack-dev-server --port 8088 --inline：--inline把webpack-devserver的client直接用脚本的方式插入页面
==========实操==============
1.建立src及其子文件夹
2.npm初始化
在项目目录执行npm init 。输入各项参数配置，最后生成了一个package.json。
3.安装webpack
npm install webpack -g 安装全局
npm install webpack webpack@1.15.0 --save-dev 安装本地
最后多了一个node_modules文件夹
此时3-4的4:15
-----------------------------------------------------------
然后就是webpack get started，未整理
1.引入jquery，可以用npm但是直接script标签更方便，上bootcdn找。
2.版本出错，怎么也调不好，暴力解决：直接按版本号在package.json里改掉，然后删了node_modules目录，再直接npm install。
npm ls webpack -g：看全局的版本号，不带-g就是本地的
3.字体库font-awesome
安装：npm install font-awesome --save
引进：require('node_modules/font-awesome/css/font-awesome.min.css');
使用：<i class="fa fa-user"></i>