Icon，在界面设计中，具有指代意义的图形符号。在前端开发中，图标往往由 UI 设计给出，然后经前端开发人员在 html 中使用。Icon 的设计和使用在近几年的发展中，也经历了由当初的 img 方案 到现如今的 svg 方案。下文将从 Icon 的发展历程以及到现如今的 svg sprite 技术给出具体的介绍。

vue单文件的开发过程中，在单文件模版中可能会涉及到文件路径的处理，比如 <img>, style 中的 background 的处理等。下文中讨论了几种不同场景下的 <img> 的 src 处理，解释了在使用 vue+webpack 的开发过程中如何正确的引用静态资源（比如图片的处理）。

offsetTop，offsetLeft，clientHeight，clientWidth，scrollHeight…等等属性如果没有特殊的体会，往往看一遍忘一遍。下文中系统的总结了以上几种计算页面元素大小的属性的性质和区别。

HTTP cookie(web cookie, browser cookie)是服务器发送给客户端浏览器的数据片段。客户端浏览器将保存这段数据并在下次访问同一个服务器地址时带上这段数据。通常，它被用来识别两次请求是否来自同一个浏览器，保持用户的登录状态。比如，它为无状态的HTTP协议记录了状态信息。

webpack是目前被大家广为使用的模块打包器。从命令行输入webpack或者在package.json的npm scripts中配置webpack脚本都可以使用webpack。虽然效果是一样的，但是两者有区别吗？最近在阅读源码的过程中发现了这个事情，原来两者是有区别的。

阅读源码的正确姿势在大致了解该工具库如何使用之后，抱着知其所以然的目的去了解其实现。在几个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 的打包机制进行解释。