一、什么是webpack？

webpack是一个module bundler（模块打包工具），其可以兼容各种js书写规范，且可以处理模块间的依赖关系，具有更强大的js模块化的功能。Webpack对它们进行统一的管理以及打包发布，其官方主页用下面这张图来说明Webbpack的作用。

what-is-webpack.png

在讲课的时候讲解过webpack，并且从零开始使用了webpack搭建了一个工作流，在这里就不啰嗦讲解了。

二、使用vue-cli搭建开发环境

在使用Vue-cli之前，需要安装Nodejs环境和Vue-cli工具。

2.1安装Nodejs

在www.nodejs.org网站下载相应的Nodejs版本，或者使用NVM来管理Nodejs。

2.2在全局安装Vue-cli

npm install -g vue-cli

2.3构建项目

1. vue init webpack my_prj

其中webpack是模板名称，my_prj是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹。

2.cd my_prj

使用cd命令切换到相应的文件目录中

3.cnpm install

使用cnpm install为整个工程安装依赖包。这里咱们使用的是cnpm，防止下载资源的时候下载不了，因为cnpm是阿里的一个下载工具。

4.使用npm run dev启动工程

因为在package.json中使用了

2017-05-11_130127.png

5.打包上线

自己编写的代码都放在src文件夹下，项目开发完成之后，可以输入npm run build来进行打包工作。