webpack2.0快速构建vue2.0项目

---

此为使用webpack快速构建vue2.0项目的方法，各个依赖包的版本和文中一致，否则不同版本的包可能webpack编译时会出问题

1、 npm init -y 初始化项目 会在当前文件夹下生成一个package.js的文件,然后全局安装npm install -g webpack@^2.1.0-beta.25打包项目，以便使用webpack命令

2、安装各种依赖项

 * npm install --save vue 安装vue2.0
 * npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9   //安装webpack以及webpack测试服务器，
 * npm install --save-dev babel-core babel-loader babel-preset-es2015 
 * npm install --save-dev vue-loader vue-template-compiler 用来解析vue的组件，.vue后缀的文件 
 * npm install --save-dev css-loader file-loader 用来解析css

3、编写页面

（1）、新建目录src，里面新建App.vue

（2）、在src目录下新建main.js

/* 引入vue和主页 */
import Vue from 'vue'
import App from './App.vue'

/* 实例化一个vue */
new Vue({
  el: '#app',
  render: h => h(App)
})

（3）、配置webpack

/* 引入操作路径模块和webpack */
var path = require('path');
var webpack = require('webpack');

module.exports = {
/* 输入文件 */
entry: './src/main.js',
output: {
    /* 输出目录，没有则新建 */
    path: path.resolve(__dirname, './dist'),
    /* 静态目录，可以直接从这里取文件 */
    publicPath: '/dist/',
    /* 文件名 */
    filename: 'build.js'
},
module: {
    rules: [
        /* 用来解析vue后缀的文件 */
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        },
        /* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
        {
            test: /\.js$/,
            loader: 'babel-loader',
            /* 排除模块安装目录的文件 */
            exclude: /node_modules/
        }
    ]
  }
}

（4）、打包项目
在cmd面板中使用webpack，这时目录下会多出一个dist文件夹，查看里面会有build.js，发觉里面的es6语法已经被转化了

（5）、根目录下新建index.html，引入build.js然后打开

结构图片如下

QQ截图20170221160658.png

---

这样就算打包完成了，但是每修改一次都要重新打包这样显然没有任何效率，于是需要线上的热重载

4、npm install -g webpack-dev-server@^2.1.0-beta.9 全局安装 ，然后在cmd中键入webpack-dev-server，即可启动热重载服务。

在浏览器输入http://localhost:8080/查看页面
这时修改页面的代码，不用刷新浏览器直接更改
这时候可以看到

QQ截图20170221160844.png