《webpack学习》- 基本概念

模块化

模块化是将一个复杂的系统分解为多个模块以方便编码。
以前开发通过命名空间的方式来组织代码，例如JQuery，放在window.$下，但是存在一些缺点：

• 命名空间冲突，例如Zepto也被放在window.$下
• 无法合理的管理项目的依赖和版本
• 无法方便地控制依赖的加载顺序

CommonJS

CommonJS（http://www.commonjs.org）是一种广泛使用的JS模块化规范，使用方式如下：

// 导入
const moduleA = requre(./moduleA);

// 导出
module.exports = moduleA.someFunc;

优点：

• 代码可复用于Node.js环境下并运行，例如做同构应用
• 通过NPM发布的很多第三方模块都采用了CommonJS规范

缺点：
　* 无法直接在浏览器环境下运行，必须通过工具转换成ES5

AMD

也是一种JS模块化规范，与CommonJS不同在于，它采用了异步的方式去加载依赖的模块。

// 定义一个模块
define('module', ['dep'], function(dep){
  return exports;
});
// 导入和使用
require(['module'], funciton(module){
});

优点：

• 可在不转换代码的情况下直接在浏览器中运行
• 可异步加载依赖
• 可并行加载多个依赖
• 代码可运行在浏览器环境和Node.js环境下

ES6 模块化

它在语言层面上实现了模块化。浏览器厂商和Node.js都宣布要原生支持该规范，它将逐渐取代CommonJS和AMD规范，成为浏览器和拂去起通用的模块解决方案。

// 导入
import { readFile } from 'fs';
import React from 'react';

// 导出
export function hello() {};
export default {
// ...
};

缺点:
目前无法直接运行在大部分JS环境下，必须通过工具转换成标准的ES5后才能正常运行。

样式中的模块化

除了JS开始进行模块化改造，前端开发里的样式文件也支持模块化，例如SCSS、LESS等。

新框架

React、Vue、Angular

新语言

• ES6
• TS
• Flow（类TS，但更灵活）
• SCSS、LESS

常见构建工具

构建工具的功能：

• 代码转换
• 文件优化
• 代码分割
• 模块合并
• 自动刷新
• 代码校验
• 自动发布

常见构建工具：

• Npm Script
• Grunt
• Gulp
• Fis3
• Rollup
• webpack（随着时代的发展，webpack目前已经具有统治的地位，其他的就不介绍了）