1. webpack 简介

webpack是一款模块加载器及处理工具，它能把各种资源，例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。也就是说，webpack可以把ES6语法的js文件，sass样式等无法直接在浏览器中使用的语言编译成浏览器支持的形式，也可以把需要的文件进行合并、压缩混淆。

webpack的使用

1.使用 sudo cnpm/npm install webpack -g 将webpack全局安装到本地环境中，这样就能使用webpack命令了

2.在项目文件下创建下列文件： index.html，main.js，App.vue， webpack.config.js。其中index.html是最终展示的html文件，main.js是入口文件，App.vue是一个vue文件，为main.js提供需要的组件，webpack.config.js是webpack的配置文件，用于配置编译各类文件所需要的加载器，例如.js 文件要用到的babel-loader，.css文件要用到的css-loader和style-loader。此外，还要利用npm init --yes 生成package.json工程文件。

3.而在package.json里面可以配置常用命令:

4.利用cnpm install XXXX --save-dev下载相应的加载器，配置文件package.json也会自动更新。

5.在webpack.config.js中配置相应的加载器。简单解释如下配置。文件的入口是./main.js，出口是bundle.js文件。以.vue结尾的文件用vue-loader加载编译，除/node_modules/目录以外的其他所有以.js结尾的文件都用babel-loader加载编译。babel是下一代js语法编译器，可以将ES6转成ES5代码。

6.main.js文件这时候就可以引入vue实例以及App组件，这个App.vue组件是被vue-loader加载加载过后的模块，可以直接引入。在创建vue的实例的时候，el与index.html中的根元素想对应，并且vue2.0用箭头函数包含组件。

7.App.vue就是对应的组件，在早期进行组件化编写时，我们往往会把一个组件的html，css，js放在三个不同的文件中，然后利用编译工具再合到一起。这样产生的不便就时文件过多。vue-loader的出现，使得我们能将一个组件的html，css，js放在一个文件中，用不同的标签包裹住即可。vue-loader会将这三块代码分别编译成可执行的代码。还有一点要注意的是，在template里面编写html代码，一定要事先用一个跟元素div包含起来。