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