1 工程化
前端自动化或者半自动化工程，需要实现以下功能：
- 合并和压缩 Javascript、CSS 代码 。
- CSS 预处理： Less ， Sass, Stylus 的编译。
- 生成雪碧图（CSS Sprite）。
- ES6 转换为 ES5 语法。
- 模块化。
名称解析：
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Sass 是一个将脚本解析成 CSS 的脚本语言，即 SassScript。
stylus，是 CSS 的预处理框架。
CSS Sprites 在国内很多人叫 css 精灵，是一种网页图片应用处理方式 。 它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了 。
2 webpack 简介
本质上， webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler) 。 当 webpack 处理应用程序时，它会递归地构建一个依赖关系图 (dependency graph) ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 下图是 webpack 的模块化示意图：
左边是我们所写的各种前端格式文件，这些文件会通过在 webpack 中定义的特定加载器（ Loader ）编译之后，统一生成右边的静态资源文件。
在 Webpack 中，图片、CSS 文件以及字体，都被称为模块，这些模块彼此存在依赖关系， webpack 会处理这些模块之间的依赖关系，然后打包。
举个例子：在常规的 html 中，如果我们需要引入一个 css 文件，通常在 html 页面的 部分使用 将其引入：
而在 webpack 中，我们可以直接在 .js 文件中导入 CSS：
import 'style.css';//ES 2015 语法
webpack 在打包时， style.css 会被打包进一个 js 文件，然后通过动态创建