How are Webpack Vuejs and vue-router used?

　　prior to reading this article, it is recommended to have a preliminary understanding of Webpack and Vuejs, through Webpack's official website and Vuejs's Chinese official website to understand can

Website Main directory://Some files are not necessarily listed, pay attention to observe

Vue-wepack   -src--components
    --js
      ---app.js
    --css-dist   -package.json   -webpack.config.js-index.html

package.json//Note that there will be some extra loader bags, this explanation does not necessarily use

{"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-lo Ader ":" ^0.4.3 "," less ":" ^2.7.1 "," Less-loader ":" ^2.2.3 "," Style-loader ":" ^0.13.1 "," Vue ":" ^1.0.24 "," V Ue-html-loader ":" ^1.2.2 "," Vue-loader ":" ^8.5.2 "," Vue-resource ":" ^0.7.4 "," Vue-router ":" ^0.7.13 ", 
" htt P-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: [//Parse. vue file {test:/\.vue$/,loader: ' Vue '},//conversion ES6 Syntax {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 ',}}};

　　

　

How are Webpack Vuejs and vue-router used?