webpack支持的模块类型

1.ECMAScript（静态加载）

ES2015 import语句

// 模块的整体加载
import defaultExport from "module-name";

//import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同
import { export1 } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";

//重命名  使用as
import * as name from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import { export1 as alias1 } from "module-name";

//import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径。如果不带有路径，只是一个模块名，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置
import { myMethod } from 'util';

//由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构

// 报错
import { 'f' + 'oo' } from 'my_module';
// 报错
let module = 'my_module';
import { foo } from module;
// 报错
if (x === 1) {
  import { foo } from 'module1';
} else {
  import { foo } from 'module2';
}

//import语句会执行所加载的模块
import 'lodash';

2.CommonJS 模块

CommonJs require()语句
require命令的基本功能是，读入并执行一个JavaScript文件，然后返回该模块的exports对象

// example.js
var invisible = function () {
  console.log("invisible");
}

exports.message = "hi";

exports.say = function () {
  console.log(message);
}

//--------------------
//其他页面引入
var example = require('./example.js');

//----------------

如果模块输出的是一个函数，那就不能定义在exports对象上面，而要定义在module.exports变量上面。

module.exports = function () {
  console.log("hello world")
}

require('./example2.js')() //执行module.exports

require命令用于加载文件，后缀名默认为.js
加载规则：
根据参数的不同格式，require命令去不同路径寻找模块文件。

（1）如果参数字符串以“/”开头，则表示加载的是一个位于绝对路径的模块文件。比如，require(’/home/marco/foo.js’)将加载/home/marco/foo.js。

（2）如果参数字符串以“./”开头，则表示加载的是一个位于相对路径（跟当前执行脚本的位置相比）的模块文件。比如，require(’./circle’)将加载当前脚本同一目录的circle.js。

（3）如果参数字符串不以“./“或”/“开头，则表示加载的是一个默认提供的核心模块（位于Node的系统安装目录中），或者一个位于各级node_modules目录的已安装模块（全局安装或局部安装）。
（4）如果参数字符串不以“./“或”/“开头，而且是一个路径，比如require(‘example-module/path/to/file’)，则将先找到example-module的位置，然后再以它为参数，找到后续路径。

（5）如果指定的模块文件没有发现，Node会尝试为文件名添加.js、.json、.node后，再去搜索。.js件会以文本格式的JavaScript脚本文件解析，.json文件会以JSON格式的文本文件解析，.node文件会以编译后的二进制文件解析。

（6）如果想得到require命令加载的确切文件名，使用require.resolve()方法。

3.AMD 模块

define 和 require 语句

AMD（异步模块定义）是为浏览器环境设计的，当前浏览器环境还没有准备好同步加载模块的条件。
CommonJS 模块系统是同步加载的（NODE使用，因为nodejs主要用于服务端编程，模块一般存放在本地服务器，不用担心加载速度），

//AMD格式
define(id?: String, dependencies?: String[], factory: Function|Object);

// id 是模块的名字，它是可选的参数。
// dependencies 指定了所要依赖的模块列表，它是一个数组，也是可选的参数，每个依赖的模块的输出将作为参数一次传入 factory 中。
//如果没有指定 dependencies，那么它的默认值是 ["require", "exports", "module"]。

定义一个名为 myModule 的模块，它依赖 jQuery 模块：

//定义
define('myModule', ['jquery'], function($) {
    // $ 是 jquery 模块的输出
    $('body').text('hello world');
});
// 使用
require(['myModule'], function(myModule) {});

依赖多个模块的定义：

define(['jquery', './math.js'], function($, math) {
    // $ 和 math 一次传入 factory
    $('body').text('hello world');
});

模块输出：

define(['jquery'], function($) {

    var HelloWorldize = function(selector){
        $(selector).text('hello world');
    };

    // HelloWorldize 是该模块输出的对外接口
    return HelloWorldize;
});

在模块定义内部引用依赖：

define(function(require) {
    var $ = require('jquery');
    $('body').text('hello world');
});

4.资源模块(asset module)

css/sass/less 文件中的 @import 语句

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。

• 1.asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
• 2.asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
• 3.asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
• 4.asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

5.WebAssembly 模块

WebAssembly 是一种可以使用非 JavaScript 编程语言编写代码并且能在浏览器上运行的技术方案。

详情可参考：WebAssemblyhttps://pspdfkit.com/blog/2017/webassembly-a-new-hope/