0基础快速入门WebPack（1）——引言：简述模块化思想

1. 重点提炼

模块化

• commonjs - node.js
• amd/cmd - require.js / sea.js
• umd - 同构
• esm - ECMAScript Module

2. webpack 与 模块化

2.1 模块化

模块化已经是现代前端开发中不可或缺的一部分了。

把复杂的问题分解成相对独立的模块（把一个大的项目中功能进行拆解，然后分门别类的存放起来，用文件的方式组织起来），这样的设计可以降低程序复杂性（一个好的文件/模块组织管理方式带来的好处），提高代码的重用，也有利于团队协作开发与后期的维护和扩展。

相当于现在有100个不一样的东西，如果把这些东西都统一放在一个位置的话，如果我们需要某个东西，从这100个东西里去找回非常麻烦，如果按照不同的功能，把这些东西分门别类放在不同的位置，并打上标签，这样的话，就很好找了，因此一个好的文件/模块组织管理方式能够帮我们降低程序复杂性、后期维护和扩展等。

如封装函数、面向对象和模块化都有很多相似之处，无非就是把问题简单话而已。实际开发过程中，后端开发一上手就需要掌握模块化，而前端模块化是近些年来火起来了的。

从 ECMAScript2015 开始引入了模块的概念，我们称为：ECMAScript Module，简称：ESM

2.2 模块化的核心

• 独立的作用域

  • 随着项目的复杂，所产生的数据可能产生很多干扰。像原生js，无论拆分多少都是依靠script标签引入的，如果不做处理，引进来的函数与变量则都是全局的。不同文件之间是相互影响的，其数据、对象、变量等等都是相互影响的，因此首要解决的问题就是模块作用域，即拆出去的代码都必须有独立作用域。

• 如何导出模块内部数据

  • 如果把代码拆到一个个模块中去了，这个模块又相对是独立的，那如何把这个独立模块的数据导出去呢（供其他模块使用）？

• 如果导入外部模块数据

  • 考虑导入其他模块导出的数据

2.3 ESM

从 ECMAScript2015/ECMAScript6 开始，JavaScript 原生引入了模块概念，而且现在主流浏览器也都有了很好的支持

2.3.1 独立模块作用域

一个文件就是模块，拥有独立的作用域，且导出的模块都自动处于 严格模式下，即：'use strict'

2.3.2 导出模块内部数据

使用 export 语句导出模块内部数据

// 导出单个特性（单个数据）
export let name1, name2, …, nameN;
export let name1 = …, name2 = …, …, nameN;
export function FunctionName(){
   ...}
export class ClassName {
   ...}

// 导出列表
export {
    name1, name2, …, nameN };

// 重命名导出
export {
    variable1 as name1, variable2 as name2, …, nameN };

// 默认导出
export default expression;
export default function (…) {
    … }
export default function name1(…) {
    … }
export {
    name1 as default, … };

// 模块重定向导出（导入一个模块，把这个模块原封不动地导出，一般作统一导出入口的时候用这种方式）
export * from …;
export {
    name1, name2, …, nameN } from …;
export {
    import1 as name1, import2 as name2, …, nameN } from …;
export {
    default } from …;

2.3.3 导入外部模块数据

导入分为两种模式

• 静态导入<