最近在内部项目中做了一些基于 vue + webpack的项目，在此稍微总结了一下。
首先，我会先简单介绍一下 vue 和 webpack：
(当然如果你已经比较熟悉它们的话前两个部分可以直接跳过)
介绍 vue
Vue.js 是一款极简的 mvvm 框架，如果让我用一个词来形容它，就是 “轻·巧” 。如果用一句话来描述它，它能够集众多优秀主流的前端框架之大成，但同时保持简单易用。废话不多说，来看几个例子：
<div id="demo">
{{message}}
<input v-model="message">
</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
}
})
</script>
首先，代码分两部分，一部分是 html，同时也是视图模板，里面包含一个值为 message 的文本何一个相同值的输入框；另一部分是 script，它创建了一个 vm 对象，其中绑定的 dom 结点是 #demo，绑定的数据是 {message: ‘Hello Vue.js’}，最终页面的显示效果就是一段 Hello Vue.js 文本加一个含相同文字的输入框，更关键的是，由于数据是双向绑定的，所以我们修改文本框内文本的同时，第一段文本和被绑定的数据的 message 字段的值都会同步更新——而这底层的复杂逻辑，Vue.js 已经全部帮你做好了。
我们还可以加入更多的 directive，比如：
<div id="demo2">
<img title="{{name}}" alt="{{name}}" v-attr="src: url">
<input v-model="name">
<input v-model="url">
</div>
<script>
var vm = new Vue({
el: '#demo2',
data: {
name: 'taobao',
url: 'https://www.taobao.com/favicon.ico'
}
})
</script>
这里的视图模板加入了一个 标签，同时我们看到了 2 个特性的值都写作了 。这样的话，图片的 title 和 alt 特性值就都会被绑定为字符串 ‘taobao’。
如果想绑定的特性是像 img[src] 这样的不能在 html 中随意初始化的 ，没关系，有 v-attr=”src: url” 这样的写法，把被绑定的数据里的 url 同步过来。
web 组件化
最后要介绍 Vue.js 对于 web 组件化开发的思考和设计
如果我们要开发更大型的网页或 web 应用，web 组件化的思维是非常重要的，这也是今天整个前端社区长久不衰的话题。
Vue.js 设计了一个 *.vue 格式的文件，令每一个组件的样式、模板和脚本集合成了一整个文件， 每个文件就是一个组件，同时还包含了组件之间的依赖关系，麻雀虽小五脏俱全，整个组件从外观到结构到特性再到依赖关系都一览无余 ：
介绍 webpack
webpack是另一个近期发现的好东西。它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
举个例子，现在有个脚本主文件 app.js 依赖了另一个脚本 module.js
// app.js
var module = require(‘./module.js’)
… module.x …
// module.js
exports.x = …
则通过 webpack app.js bundle.js 命令，可以把 app.js 和 module.js 打包在一起并保存到 bundle.js
同时 webpack 提供了强大的 loader 机制和 plugin 机制，loader 机制支持载入各种各样的静态资源，不只是 js 脚本、连 html, css, images 等各种资源都有相应的 loader 来做依赖管理和打包；而 plugin 则可以对整个 webpack 的流程进行一定的控制。
比如在安装并配置了 css-loader 和 style-loader 之后，就可以通过 require(‘./bootstrap.css’) 这样的方式给网页载入一份样式表。非常方便。
webpack 背后的原理其实就是把所有的非 js 资源都转换成 js (如把一个 css 文件转换成“创建一个 style 标签并把它插入 document”的脚本、把图片转换成一个图片地址的 js 变量或 base64 编码等)，然后用 CommonJS 的机制管理起来。一开始对于这种技术形态我个人还是不太喜欢的，不过随着不断的实践和体验，也逐渐习惯并认同了
