阅读源码的正确姿势在大致了解该工具库如何使用之后，抱着知其所以然的目的去了解其实现。在几个vue单页应用的工程中应用了webpack作为模块的编译和打包工具。通过vue-cli的webpack模板可以一键傻瓜式的快速搭建单页应用的开发原型。在vue-cli内部的webpack模板帮我们提前写好了webpack的一些配置，让开发人员将精力集中在内容的开发上，而非打包工具的配置上。这一点对于刚接触webpack的开发人员来说，无疑节省了大量的精力。熟悉webpack的常用配置以及其内部运行机制，有助于我们对整个前端项目有更好的把控。

本文旨在搞清楚从命令行下敲下 webpack 命令，或者配置 npm script 后执行 package.json 中的命令，到工程目录下出现打包的后的 bundle 文件的过程中，webpack都替我们做了哪些工作。

vue-cli是vue官方出品的一个脚手架工具，通过vue-cli可以快速的搭建一个vue的SPA应用的开发框架。其内部提供了多种vue-js-template，作用就是通过相应的template去配置生成项目初期的内容。其中webpack模板提供了全面丰富的webpack配置，包括热重载、单元测试、静态检查以及css提取等功能。

webpack作为一个打包工具，其plugin（插件）机制在很大程度上扩展了其功能。本文总结了在开发中常用的一些插件及其作用。通过在webpack配置的plugins数组中添加插件的实例，我们便可以在webpack的编译过程中的某个生命周期调用该插件。另外webpack文档中也给出了丰富的插件集合，详情见webpack plugins

webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图表(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。

webpack作为一个模块打包工具，不仅可以打包js文件，还可以打包其他非js文件。下文仅针对js文件，从 CommonJS 模块和 ES6 模块两种处理模块的方式对 webpack 的打包机制进行解释。

Vue v2.4 版本中新添加了 $attrs 以及 $listeners 属性。之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的情况下变得简洁，业务清晰。

记得2015年看一些node的代码时，示例中往往会使用回调函数做一些异步处理，去年的时候看会发现大部分成了promise，当今年再看时发现大部分已经成了async/await。为什么js的异步操作解决方案更新的如此之快，每种方案的使用场景以及弊端是什么，下文中给出了介绍。以下均为自己的一些理解，描述如有偏差欢迎指正。

来自 segmentfault 的问答，关于js构造函数的返回值的问题的讨论。

目前nodejs的高级版本对es6的支持越来越大，大部分的es2015的特性在node高版本中不需要babel转码就可以直接使用。涉及到对es2016以及es2017的一些特性的支持目前还不是很广泛，只能借助于babel的转码编译。如 async/await 特性，... 对象扩展运算符等。下文介绍了在部分特性无法得到支持的情况下，如何在node环境中使用es6语法。

更新： Node7 通过 --harmony_async_await 参数已经支持了async/await 特性。

基于 Webpack+Vue 的单页面开发过程中，准备全面尝试拥抱 ES2015 规范，尝试一些新的东西。在进行实践的过程中，感受比较深的就是 ES6 的模块机制。之前 Node 环境下实现了 CommonJS 规范的模块机制，使用 require/module.exports 进行模块的同步加载。ES6 的模块机制是什么，为什么在已有了 CommonJS 模块规范的情况下又冒出来一个 ES6 的模块机制，两者本质上以及在使用过程中有什么不同，下面针对上述问题针对对应的案例进行了详细的解释。