Webpack （一）Webpack背景及其发展

一.框架的变化：

js库----MVC— MVVM时代（Angular、React、Vue）

html和css也不断发展

二.为什么前端需要构建：

1.开发复杂化

2.框架去中心化

3.语言编译化

4.开发模块化

三.为什么Webpack：

Vue-cli/React-stater/Angular-cli

Code-splitting

天生的模块化

四.模块化开发：

1.CSS模块化

2.JS模块化

五.JS模块化发展：

1.命名空间:

库名.类别名.方法名 NameSpace.type.method= function() { } YUI

2.COMMOMJS（只能在服务器端）:

一个文件为一个模块；

module.exports暴露模块接口；

通过require引入模块；

同步执行

3.AMD/CMD/UMD：

（1）AMD：Async Module Definition 异步模块定义

使用define定义模块

通过require加载模块

RequireJS

依赖前置,提前执行

（2）CMD：Common Module Definition

一个文件为一个模块

使用define定义一个模块

通过require加载模块

SeaJS

尽可能懒执行

（3）AMD和CMD区别：

执行方式不一样：

AMD前置，CMD不会被执行，直到逻辑代码运行到那才会执行

（4）UMD：Universal Module Definition 通用模块定义

通用解决方案

三个步骤：

判断是否支持AMD

判断是否支持COMMONJS

如果没有 使用全局变量

4.ES6 module：

EcmaScript MODULE

一个文件一个模块

export暴露一个接口/ import引用一个接口 import { …} from " … "

5.Webpack支持（不需要Babel转码，原生支持ES6）：

AMD(RequiresJS)

ES6 Modules（推荐）

CommonJS

六.CSS模块化：

CSS设计模式：

1.OOCSS：面向对象的CSS

2.SMACSS：可扩展和模块化简称

3.Atomic CSS：基于视觉功能小的 单用途的

4.MCSS：多层级的CSS

5.AMCSS：属性进行编码

6.BEM：Block Element Modifier

7.CSS Modules

七.Webpack安装：

1.安装node和npm

2.npm install global webpack(全局安装)

3.npm install global webpack-cli（全局安装）

八.Webpack版本进化：

1.webpack v1：

编译、打包；HMR（模块热更新：不刷新页面也能更新）；代码分割；文件处理

2.webpack v2：

Tree Shaking；ES module ； 动态 Import；新的文档

3.webpack v3：

Scope Hoisting（作用域提升）对性能提升有帮助；Magic Comments（配合动态import使用）

4.webpack v4：

webpack v4.0.0 开始，可以不用引入一个配置文件；然而，webpack 仍然还是高度可配置的