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 页面的 <head> 部分使用 <link> 将其引入：
<link rel="stylesheet" type="text/css" href="style.css">
而在 webpack 中，我们可以直接在 .js 文件中导入 CSS：
import 'style.css';//ES 2015 语法
webpack 在打包时， style.css 会被打包进一个 js 文件，然后通过动态创建 <style> 的形式来加载 css 样式。还可以进一步配置 webpack ，让它在打包编译时把所有的 css 都提取出来，生成一个 css 文件。
3 webpack 适用场景
webpack 适用于单页 Web 应用（ single page web application ， SPA ）。SPA 指的是：只有一张 Web 页面，并会在用户与应用程序交互时动态更新该页面的 Web 应用程序 。
SPA 有这些特点：
| 特点 | 说明 |
|---|---|
| 速度 | 更好的用户体验，让用户在 web app 中感受到 native app 的速度和流畅。 |
| MVVM | 经典 MVVM 开发模式，前后端各负其责 。 |
| ajax | 重前端，业务逻辑全部在本地操作，数据都需要通过 AJAX 同步 、 提交 。 |
| 路由 | 在 URL 中采用 # 号来作为当前视图的地址 , 改变 # 号后的参数，页面并不会重载 。 |
4 ES6 导入、导出语法
SPA 中的一个模块就是一个 JS 文件，它拥有独立的作用域，并且内部定义的变量，外部是无法获取的。所以我们必须导出一个模块，然后再导入到需要调用它的其它模块中，这样才能正常使用。而这些操作，就会用到 ES6 导入、导出语法。
4.1 export （导出）
export 用于导出模块，比如我们想导出一个乘法函数：
export function multiple(a, b) {
return a * b;
}
4.2 import （导入）
export 用于导入模块，比如我们想在 main.js 中导入刚才的那个乘法函数：
import {multiple} from "./multiple";
console.log(multiple(2,3));//6
网友评论