webpack vuejs 和 vue-router 如何使用?

　　读本文之前,建议对webpack和vuejs有初步的了解,通过webpack的官网和vuejs的中文官网了解即可

网站主要目录://某些文件不一定全部罗列出来,注意观察

vue-wepack
 
   -src
 
　　 --components<br>    --js<br>      ---app.js<br>    --css
 
　-dist
 
   -package.json
 
   -webpack.config.js
 
　-index.html

　package.json//注意里面会有一些多余的loader包,本次讲解不一定用到

{
  "name": "hevily_mobile",
  "version": "1.0.0",
  "description": " hevily mobile",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "hevily"
  ],
  "author": "hevily",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-2": "^6.5.0",
    "babel-runtime": "^6.9.2",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "html-loader": "^0.4.3",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "style-loader": "^0.13.1",
    "vue": "^1.0.24",
    "vue-html-loader": "^1.2.2",
    "vue-loader": "^8.5.2",
    "vue-resource": "^0.7.4",
    "vue-router": "^0.7.13",<br>    "http-server": "^0.9.0",
    "vue-style-loader": "^1.0.0",
    "vux": "^0.1.1-rc3",
    "webpack": "^1.13.1"
  }
}

　　webpack.config.js

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
 
 
module.exports = {
    entry: {
        'app': './src/js/app.js'
    },
    output: {
        filename: './dist/js/app.js'
    },
    module: {
        loaders: [
            // 解析.vue文件
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            // 转化ES6的语法
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/
            }, {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader'),
            }, {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
            },
            {
                test: /\.html$/,
                loader: "html"
            }
        ]
    },
    babel: {
        presets: ['es2015', 'stage-2'],
        plugins: ['transform-runtime']
    },
    plugins: [
        new ExtractTextPlugin("./dist/css/app.css")
    ],
    devtool: 'source-map',
    resolve: {
        extensions: ['', '.js', '.vue'],
        modulesDirectories: ['node_modules'],
        alias: {
            'Vue': __dirname + '/node_modules/vue/dist/vue.js',
            'Router': __dirname + '/node_modules/vue-router/dist/vue-router.js',
        }
    }
};