vue + webpack调试（热替换）

技术不断的在变化，网络资源也很多，当然坑也不少。希望能让大家少走点弯路。现在有很多初始化的库可以直接使用，但是感觉还是有必要从零开始配置，不然到后面越来越懵逼了。用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去安装