webpack模块化方案

1. CommonJS

特点

• 同步加载：模块在第一次 require 时同步加载。
• 单例模式：每个模块只加载一次，后续使用缓存。
• 主要用于 Node.js：设计初衷是为了服务器端的模块化。
• 导入导出：
  • 导出：module.exports 或 exports
  • 导入：require()

示例

// 导出
module.exports = {
  foo: function() { console.log('foo'); }
};

// 导入
const myModule = require('./myModule');
myModule.foo();

2. AMD (Asynchronous Module Definition)

特点

• 异步加载：模块和依赖都是异步加载。
• 适用于浏览器环境：优化前端模块加载和依赖管理。
• 导入导出：
  • 定义模块：define
  • 导入模块：依赖数组和回调函数

示例

// 定义模块
define(['dep1', 'dep2'], function(dep1, dep2) {
  return {
    foo: function() { console.log('foo'); }
  };
});

// 导入模块
require(['myModule'], function(myModule) {
  myModule.foo();
});

3. ES6 Modules (ESM)

特点

• 静态分析：编译时静态分析，可以进行 Tree Shaking。
• 异步加载：动态 import 支持异步加载。
• 标准化：原生支持，现代浏览器和 Node.js（通过 --experimental-modules）都支持。
• 导入导出：
  • 导出：export 或 export default
  • 导入：import

示例

// 导出
export const foo = () => { console.log('foo'); };
export default function() { console.log('default export'); };

// 导入
import { foo } from './myModule';
import defaultExport from './myModule';
foo();
defaultExport();

4. UMD (Universal Module Definition)

特点

• 兼容性强：同时支持 CommonJS、AMD 和全局变量的模块加载。
• 适用于库：常用于需要在多种环境下都能运行的库。
• 导入导出：
  • 兼容多种模块定义方式

示例

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['dep'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // Node, CommonJS-like
    module.exports = factory(require('dep'));
  } else {
    // Browser globals (root is window)
    root.myModule = factory(root.dep);
  }
}(this, function (dep) {
  return {
    foo: function() { console.log('foo'); }
  };
}));

5. SystemJS

特点

• 灵活：支持多种模块格式（ES6、AMD、CommonJS 等）。
• 动态加载：适用于需要动态加载模块的应用。
• 配置化：通过配置文件进行模块管理。

示例

System.import('myModule').then(function(myModule) {
  myModule.foo();
});

Webpack 支持的模块化方案

Webpack 支持以上所有模块化方案，并且可以通过配置文件 (webpack.config.js) 和适当的加载器（loaders）来处理不同类型的模块。以下是 Webpack 支持这些模块的方式：

• CommonJS：默认支持，Node.js 风格的模块。
• AMD：通过配置 amd 选项来支持。
• ESM：默认支持，现代 JavaScript 模块。
• UMD：适用于打包库时的输出格式。
• SystemJS：通过插件支持。