webpack vuejs 和 vue-router 如何使用?

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

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

vue-wepack

-src

　　 --components
--js
---app.js
--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",
"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',
}
}
};

　　http://v.qq.com/page/s/r/x/s0307x8bwrx.html