最近需求变动很快啊…今天基于这个明天构建那个的。多写点东西沉淀一下知识，之后查阅起来会方便很多
文章用到的代码，都可以在github上clone至本地，使用npm install安装依赖，使用npm run build打包后，双击index.html即可看到效果。
前端技术日新月异，这就导致很多我这样的初级前端三天两头琢磨新工具…上一篇文章使用Webpack+React建立基于Ant Design的页面，就是因为项目组准备使用ant design来重构一个平台，于是我就研究了一把新技术。没想到的是连Ant Design的边都还没摸到，项目组又准备用新技术来重构了…这次要用的是基于Vue的组件库iView。Vue大名鼎鼎，大家应该都知道。那iView是个什么东东呢？
其实iView是Ant Design组件库的另一种实现版本啦，换汤不换药。 就像孙悟空有七十二变，但是不管变成什么，他都是孙悟空。
按照老套路，我们先构建一个webpack的，使用Vue的Helloworld程序出来！
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"vue": "^2.2.6",
"webpack": "^2.3.2"
可以把上文直接复制到package.json的devDependencies节点里，之后npm install，当然也可以使用npm下载到项目中
npm install babel-core babel-loader babel-preset-es2015 vue webpack --save-dev
babel的配置文件，从用到的库里就可以看出来，使用了es2015的preset，所以新建一个名为.babelrc的文件，里面写入
{
presets: [
"es2015"
]
}
webpack.config.js目前来看也很简单，内容如下
module.exports = {
entry: "./entry.js",
output: {
filename: "bundle.js"
},
module: {
loaders:[
{
test: /\.js$/,
exclude: "/node_modules/",
loader: "babel-loader"
}
]
}
}
这里面的意思是，项目入口文件为entry.js，会被webpack打包成bundle.js，所有用到的js文件(除了/node_modules文件夹内的)都会由babel进行处理。
我们可以很简单的构建一个index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script src="bundle.js"></script>
</html>
import Vue from 'vue'
new Vue({
el: "#app",
data: {
message: "HelloWorld!"
}
})
构建好啦~
这时候可以在控制台输入webpack打包，会自动生成bundle.js文件。
我们运行index.html，会看到
独立构建和运行构建。它们的区别在于前者包含模板编译器而后者不包含。 模板编译用于编译 Vue 模板字符串成纯 JavaScript 渲染函数。如果你想用 template 选项， 你需要编译。 模板编译器的职责是将模板字符串编译为纯 JavaScript 的渲染函数。如果你想要在组件中使用 template 选项，你就需要编译器。
Soga！我又通过对/node_modules/vue内的package.json的研究，发现其对应的main指向了dist/vue.runtime.common.js，而不是传统的vue.js。
怎么解决？其实很简单。打开webpack.config.js，进行一个alias的配置即可。
官网上是这样配置的，我们可以参照
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}
// ...
这回是真的构建完成了，我们进行打包webpack。之后运行index.html，可以看见HelloWorld!啦。
（未完待续...）