项目环境的搭建

1、项目的初始化

　　1、git仓库的创建：git远程服务器（GitHub、gitee）上先创建git仓库，再与本地的项目关联。

　　2、git权限配置（SSH：不需要账号密码，HTTPS：需要账号密码）

　　3、gitignore的配置

　　设置一些规则，被匹配到的文件就不会被git追踪.例如：

　　.DS_Store 是sublime产生的临时文件，会出现在目录下，但是没有什么用，就可以把它忽略掉；

　　/node_modules/是node.js的包，这个目录下所有的文件都是通过npm来安装的，它的体积一般比较大，几百兆左右，所以这个是在使用项目的时候重新安装就可以。npm install

　　/dist/存了编译好的静态文件，这些文件没有什么用，如果在开发的时候可以重新编译生成就可以了

　　4、项目的目录结构设计

2、项目工具脚手架的搭建

　　1、需要npm加载依赖包，就需要对npm进行初始化：npm init -->输入参数（项目名称，项目描述，作者等）-->生成package.json文件（所以的npm信息都在这个文件下）

　　2、安装依赖包需要用：npm install 或  npm install xxx@v.v.v 命令，安装完之后会在根目录下生成node_modules文件夹 ;

　　　　卸载依赖包：npm uninstall xxx@v.v.v

　　　　全局安装：-g

　　　　参数：--registry=https://registry.npm.taobao.org  （用来指定npm原地址的--registry）

　　3、webpack

　　　　1、设计思想--require anything 

　　　　2、加载方式：各种loader插件

　　　　3、编译方式：commonjs模块-->function类型的模块

　　　　4、--save-dev 会把包的信息写入packge.json文件里的devDependencies里，可以记录下我们的依赖。一般是放开发的辅助工具，不会被打包进业务代码。测试工具，打包工具一般用这个。

　　　　　  --save 会把包的信息写入packge.json文件里的dependencies里,一般是放业务代码的依赖包

　　　　5、webpack.config.js为webpack的最核心的配置文件

　　　　　　entry:js的入口文件

　　　　　　externals:外部依赖说明

　　　　　　output:目标文件

　　　　　　resolve:配置别名

　　　　　　module:各种文件，各种loader

　　　　　　　　　　html: html-webpack-plugin/html-loader

　　　　　　　　　　js: babel-loader + babel-preset-es2015

　　　　　　　　　　css: style-loader + css-loader

　　　　　　　　　　image + font: url-loader

　　　　　　plugins:插件

　　　　　　webpack-dev-server:前端开发服务器 可以在文件改变时，自动刷新浏览器

　　　　　　　　安装：npm install webpack-dev-server --save-dev

　　　　　　　　配置：webpack-dev-server/client?http://localhost:8088 打包进业务代码

　　　　　　　　使用：webpack-dev-server --port 8088 --inline    (--inline 方式webpack-dev-server的client直接用脚本的方式插入到页面）