技术不断的在变化，网络资源也很多，当然坑也不少。希望能让大家少走点弯路。现在有很多初始化的库可以直接使用，但是感觉还是有必要从零开始配置，不然到后面越来越懵逼了。用webpack-dev-server来实现vue的热替换，便于调试。如果node没有安装，花几分钟到node教程看以下四点。
Paste_Image.png
别人写的很详细，我就不重复写了。但是有些问题还是主要注意的，我大概都会列出来。
原理还是需要搞清楚的，不然一直都会懵逼。webpack主要是两件事情，就是打包和调试。vue是前端框架，简单高效，即学即会。import和export是ES6的语法，而且现在为了方便经常这样用。比如JS里面加入import Vue from 'vue'，这样就会自动获取npm安装的模块vue。不用到处去找路径。所以要使用ES6，而浏览器不支持ES6，所以就需要webpack和babel来使ES6转换为ES5代码，从而在现有环境执行。还有.vue结尾的文件，到底怎么跑起来的呢？其实也都是转换为.js跑起来的。由于Webpack不懂得如何去处理.vue的新语法。所以就需要在webpack.config.js配置vue的编译规则，所以现在就有babel和vue两种了。当然.css等文件也可以转换为.js文件，不过需要对应的编译规则，这样webpack才知道怎么把其它资源文件转换为js。然后是热替换的大致原理，使用到webpack的webpack-dev-server。它能快速搭建一个本地网站http://localhost:8080/。如果有文件修改，webpack会监测main.js文件相关的修改 ，上传代码和更改线上浏览器的效果。其它的js更新就是要刷新界面，vue-hot-reload-api这个模块就比较牛逼了，直接再跑了一下js，就是相当于实时刷新了。
然后进入正题，下面的看完就会了，如果遇到问题就回来看下我后面部分的总结，如果你都是用人家的版本来配置，应该就不会有什么问题。
进阶[译]用Webpack构建Vue
上面的要点进去看，上面才是全过程。
- 需要注意的是最新版的vue，需要在webpack.config.js加上下面这段，不然webpack打包出来的会有问题。
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
}
- package.json是npm的配置文件，要安装的模块都写到这里来。webpack.config.js就是打包调试的配置文件。
entry是被打包的文件，main.js所有引入的js或者其它相关资源都会被打包。
output说明，path是导出文件的目录，filename是导出文件名，publicPath要注意一下。index.html如果是通过file://的话访问的，就是path/filename的地址。如果是通过http://localhost:8080 访问的，就是publicPath/filename的地址了。所以最好是path与publicPath保持一致。比如下面
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
publicPath: 'dist/',
filename: 'build.js'
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}, {
test: /\.vue$/,
loader: 'vue'
}]
},
vue: {
loaders: {
js: 'babel'
}
}
}
浏览器还不支持 import。通常都会用 babel 把 import 转成 CommonJS或者 AMD。由于import是是ES6代码，需要用babel将ES6代码转为ES5代码，从而在现有环境执行。ES6模块主要有两个功能：export和import。
package.json中devDependencies和dependencies的区别
我们在使用npm install 安装模块或插件的时候，有两种命令把他们写入到 package.json 文件里面去，比如：
--save-dev
--save
在 package.json 文件里面提现出来的区别就是，使用 --save-dev 安装的 插件，被写入到 devDependencies 对象里面去，而使用 --save 安装的插件，责被写入到 dependencies 对象里面去。
devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。
安装一下babel和webpack的相关模块,npm install 会根据package.json的配置devDependencies和dependencies去安装
