上一次我們搭好了vue的環境，也成功把網頁跑起來了。
但是我們還不知道這一切都是怎么實現的，現在來看看第一個頁面。
首先我們得知道webpack是什么，以及怎么用的。
Webpack入門
一小時包教會 —— webpack 入門指南

Webpack的工作方式是：把你的項目當做一個整體，通過你給定的主文件（如：index.js），將從這個文件開始找到你項目的所有依賴文件，使用loaders處理它們，最后打包成一個瀏覽器可識別的js文件。

配置

每個項目下都必須配置一個webpack.config.js，它的作用如同gruntfiles.js，告訴webpack需要做什么。
我們可以在build目錄下找到它。

image.png

webpack.base.conf.js - 基礎配置文件
webpack.dev.conf.js-開發環境配置文件
webpack.prod.conf.js-生產環境配置文件

我們以我們通過vue 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: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

這邊是用來加載后面要用到的包

var path = require('path')
var webpack = require('webpack')

path是用來處理目錄的對象。

接下來的module.exports是模塊接口，有了這個我們就可以用require的方式去引用這個模塊。
node.js module初步理解

  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  }

entry是頁面入口文件配置
output是入口文件對應的輸出配置（入口文件最后生成什么名字的文件，存放在哪里）

Loaders

最激動人心的功能來了，在module.rules(1.x是module.loaders)中可以配置每一種文件都需要用什么樣的loader來處理。

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  }

后面還有一些配置，不是太重要，等以后有空了再說

入口文件

看完了配置，我們來看看入口文件做了什么。

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

import router from './router'引入了router的目錄，會默認識別里面index.js。

route

參考基于Vue2.0+Vue-router構建一個簡單的單頁應用

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',name: 'Hello',component: require('../components/Hello')
    }
  ]
})

path:'/'的意思是默認路由。

App.vue

<template>
  <div id="app">
    ![](./assets/logo.png)
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<router-view></router-view>路由匹配到的組件將渲染在這里