利用webpack+vue页面构建说明简介
使用平台： win7(其他平台请自行查找相关参考资料)
安装服务：安装nodejs作为本地服务，下载相应的nodejs 安装后，在cmd命令行中输入 node -v 检测是否有对应的版本号的返回以确认安装成功。
安装管理包工具npm：npm nodejs下的工具管理包，在新版的nodejs中已经集成了npm, 在安装nodejs 成功后 在cmd命令行中输入 npm -v 检测是否有对应的版本号返回以确认安装成功。
项目构建：
1.创建项目文件夹。
2.创建package.json文件： 再创建好项目文件夹后，进入该目录，在该目录下输入命令 npm init 然后对应的输入改项目的名称和创建者的相关信息。（如果没有相关修改，一直回车即可）
name:""//输入项目名称
version:"<1.0.0>"//项目版本号
description:""//项目描述
entry point:<index.js>//入口文件
author:""//创建者相关信息
license:<ISC>//项目模块的协议(isc以一种开放源代码的许可证，更多协议自行设定)
这样便形成了初始的package.json 文件。
3.安装该项目的依赖包：在package.json中添加我们需要的依赖包以及对应的版本号，该处主要安装的是依赖包对应的兼容版本。（也可根据自己的需求安装不同的版本，可参考semver文档）
"dependencies": {
"vue": "^1.0.28",
"vue-router": "^0.7.13"
},
"devDependencies": {
"autoprefixer-loader": "^2.0.0",
"babel": "^6.3.13",
"babel-core": "^6.3.21",
"babel-loader": "^6.2.0",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-preset-es2015": "^6.18.0",
"babel-runtime": "^5.8.34",
"css-loader": "^0.16.0",
"file-loader": "^0.8.5",
"html-loader": "^0.3.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"node-sass": "^3.4.2",
"style-loader": "^0.12.3",
"url-loader": "^0.5.6",
"vue-html-loader": "^1.2.0",
"vue-loader": "^7.2.0",
"webpack": "^1.12.0",
"webpack-dev-server": "^1.14.0"
}
在package.json中添加好之后 输入命令 npm install 所依赖的模块将会被自动添加，添加之后会形成一个新的文件目录 node_modules 该文件夹中包含了我们所安装的模块。也可不用整体安装模块，可以根据需要一个安装模块，在安装每一个时使用命令 npm install xxx(模块名和版本号),该命令安装后，package.json中不会出现对应的依赖包列表，要将其添加到package.json列表中，使用命令 npm install xxx(模块名和版本号) -D
4.webpack.config.js 的配置(以下仅作为参考)可根据自己的需要进行配置的调整
var path = require('path');
var webpack = require('webpack');
// NodeJS中的Path对象，用于处理目录的对象，提高开发效率。
// 模块导入
module.exports = {
// 入口文件地址，不需要写完，会自动查找
entry: './src/main',
// 输出
output: {
path: path.join(__dirname, './dist'),
// 文件地址，使用绝对路径形式
filename: '[name].js',
//[name]这里是webpack提供的根据路口文件自动生成的名字
publicPath: './dist/'
// 公共文件生成的地址
},
// 服务器配置相关，自动刷新!
devServer: {
historyApiFallback: true,
hot: false,
inline: true,
grogress: true,
},
// 加载器
module: {
// 加载器
loaders: [
// 解析.vue文件
{ test: /\.vue$/, loader: 'vue'},
// 转化ES6的语法
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
//{ test: /\.js$/, loader: 'babel'},
// 编译css并自动添加css前缀
{ test: /\.css$/, loader: 'style!css!autoprefixer'},
//.less 文件想要编译，less就需要这些东西！来编译处理
//install css-loader style-loader less-loader --save-dev
{ test: /\.less$/, loader: 'style!css!less?sourceMap'},
// 图片转化，小于8K自动转化为base64的编码
{ test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
//html模板编译？
//{ test: /\.(html|tpl)$/, loader: 'html-loader' },
]
},
// .vue的配置。需要单独出来配置，其实没什么必要--因为我删了也没保错
vue: {
loaders: {
css: 'style!css!less!autoprefixer',
}
},
// 转化成es5的语法
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
},
resolve: {
// require时省略的扩展名，如：require('module') 不需要module.js
extensions: ['', '.js', '.vue'],
// 别名，可以直接使用别名来代表设定的路径以及其他
alias: {
filter: path.join(__dirname, './src/filters'),
components: path.join(__dirname, './src/components')
}
},
// 开启source-map，webpack有多种source-map，在官网文档可以查到
//devtool: 'eval-source-map'
devtool: 'cheap-source-map'
};
更多参考
有关webpack的更多参考 （http://webpack.github.io/）
这篇文章完成较早了，一直没有发布，现在已经更新到vue2xx和webpack2xx,不过其中还有可参考之处，希望能对大家有所帮助。
