"scripts": {
    "dev": "node_modules\\.bin\\webpack-dev-server --inline --hot --open --port 9999",  // npm run dev	开发
     "build": "webpack"	// npm run build 上线
  },

use strict';
const path = require('path');
const fs = require('fs');
const version =JSON.parse(fs.readFileSync('./package.json','utf8')).version;
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack');
console.log(version);
//html插件
const htmlWebpackPlugin = require('html-webpack-plugin');
//压缩js插件
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    //入口(也可以是多入口)
    entry:{
        main:'./src/main.js',
        vendors:['vue','axios','vue-router','vue-preview','moment']
    },
    output:{
        //资源产出路径
        path:path.join(__dirname,'dist_production'),
        publicPath:'/',//对应请求的资源不走相对路径，
        //再公司中，最终就是加上http://www.xxx.com/
        // filename:'build.js?v='+version
        // filename:'js/[name].[chunkhash].js',  // main.312321.js
        //根据文件的不同，该标识会不一样，文件发生修改，该值也会不一样,
        //文件的指纹（数字签名）
    },
    module:{
        loaders:[
            { //处理css
                test:/\.css$/,
                use: ExtractTextPlugin.extract({
                  fallback: "style-loader",
                  use: "css-loader?minimize=true!autoprefixer-loader"
                })
            },
            {
                test:/\.less$/,
                loader:'style-loader!css-loader!autoprefixer-loader!less-loader'
            },
            {
                //处理文件
                test:/\.(jpg|png|svg|ttf|gif)$/,
                loader:'url-loader',
                options:{
                    limit:4096,
                    name:'assets/[name].[hash].[ext]'
                }
            },
            //处理js
            {
                test:/\.js$/,
                loader:'babel-loader',
                //排除node_modules目录
                exclude:/node_modules/,
                //options就交给.babelrc文件来说明
            },
            //vue
            {
                test:/\.vue$/,
                loader:'vue-loader'
            },
            //处理vue-preview中的ES6
            {
                test: /vue-preview.src.*?js$/,
                loader: 'babel-loader'
            }
        ]
    },
    plugins:[
        new UglifyJSPlugin(),//压缩js
        new ExtractTextPlugin("css/[name].[contenthash:6].css"),
            //manifest会单独产出一个文件，关联着和main之间的关系
        new webpack.optimize.CommonsChunkPlugin({
            names:['vendors','manifest']
        }),
        new htmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}
console.log(process.argv);
//做判断，究竟当前运行的是npm run build 还是run dev
if(process.argv.length === 2){ 
    //生产环境
    module.exports.output.filename = 'js/[name].[chunkhash].js';  // main.312321.js
    //让vue知道是生产环境不输出日志
    module.exports.plugins.push(new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }));
}else{  //参数个数为7
    //开发环境
    //webpack-dev-server启动的时候，没有真实的生成文件，chunkhash就用不了
    module.exports.output.filename = 'js/[name].js';
}

<ul>
	<li>
		<a href="#!/article/1/我是第1篇文章">我是第1篇文章</a>
	</li>
	<li>
		<a href="#!/article/2/我是第2篇文章">我是第2篇文章</a>
	</li>
	<li>
		<a href="#!/article/3/{a:1,b:2}">我是第3篇文章</a>  
	</li> 					// 跳转的页面写上实际参数
</ul>
		/*
			1.向被传参页面的路由中写 参数占位符
			2.在跳转链接中将实际参数 写上
			3.在被传参页面的控制器中获取 传递过来的参数
		*/
		var myApp = angular.module('myApp',['ngRoute']);
		myApp.config(function($routeProvider){
			$routeProvider
				.when('/index',{
					templateUrl:'./tpl/index.html',
					controller:'indexCtrl'
				})
				.when('/list',{
					templateUrl:'./tpl/list.html',
					controller:'listCtrl'
				})
				.when('/article/:id/:title',{    // 参数占位符
					templateUrl:'./tpl/article.html',
					controller:'articleCtrl'
				})
		})
		myApp.controller('indexCtrl',function($scope){	
		})
		myApp.controller('listCtrl',function($scope){
		})
		myApp.controller('articleCtrl',function($scope,$routeParams){
			// $routeParams 对象类型 里面存储的是 当前路由的参数
			
			// console.log($routeParams.id)
			// console.log($routeParams['id'])
			console.log( $routeParams )
			$scope.id = $routeParams.id;
		})

<body ng-app="myApp">
    
    <!--
        在路由名字的后面加上一个小括号  -> 类似于函数小括号
        在小括号中写一个对象 并把参数写在对象中  -> 类似于给函数传递了一个对象类型的值
    -->
    <a ui-sref="index">首页</a>
    <a ui-sref="list({pagenumber:1,pagesize:10})">列表页</a>
    
    <div ui-view></div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script src="node_modules/angular-ui-router/angular-ui-router.min.js"></script>
    <script>
        angular.module('myApp',['ui.router'])
            .config(['$stateProvider',function($stateProvider){
                $stateProvider
                    .state({
                        name:'index',
                        url:'/index',
                        template:'<div>首页</div>'
                    })
                    .state({
                        name:'list',
                        // 路由配置中参数的配置和ngRoute一样
                        url:'/list/:pagesize/:pagenumber',
                        template:'<div>列表页</div>',
                        controller:'listCtrl'
                    })
            }])
            .controller('listCtrl',['$stateParams',function($stateParams){
                /*
                    在获取的参数的时候 ui-router提供了一个 $stateParams 对象
                 */
            }])
    </script>
</body>
    
    
    
    angular.module("uiRouter", ["ui.router"])
				.config(function ($stateProvider,$urlRouterProvider) {
					$stateProvider
						.state({
							url: "/index",
							name: "index",
							templateUrl: "indexTpl",
							// controller: ""
						})
						.state({
							url: "/list",
							name: "list",
							templateUrl: "listTpl",
							// abstract:true,
							// controller: "listCtrl"
						})
						.state({
							url: "/article/:id",
							name: "article",
							// params:{id:1},		 params可以传参
							templateUrl: "articleTpl",
							controller: "articleCtrl"
						})
						$urlRouterProvider.otherwise('article');
				})
					.controller("articleCtrl",["$scope","$stateParams",function($scope,$stateParams){
							console.log($stateParams)
						}])
		</script>
		<script type="text/ng-template" id="indexTpl">
			<span>我是首页</span>
		</script>
		<script type="text/ng-template" id="listTpl">           templateUrl可以是模板id
			 <a ui-sref="article({id:2})">跳转详情</a>    模板中可以传参
			<!-- 我是列表 -->
		</script>
		<script type="text/ng-template" id="articleTpl">
			 <ul>
				<li>文章</li>
				<li>而已</li>
			</ul> 
		</script>