什么叫做webpack模块

 

1:ES6

import方式
import MyModule from './my-module.js';
import { NamedExport } from './other-module.js';

export方式
// 具名导出
export var Count = 5;
export function Multiply(a, b) {
  return a * b;
}

// 默认导出
export default {
  // Some data...
}

//
export 和 export default的区别
1.1:export与export default均可用于导出常量、函数、文件、模块等
1.2:在一个文件或模块中,export、import可以有多个,export default仅有一个
1.3:通过export方式导出,在导入时要加{ }(import * 的时候不需要加 {} ),export default则不需要 
1.4:export能直接导出变量表达式,export default不行。
//


动态加载模块import()
import('path/to/module') -> Promise

 

2:CommonJS

require方式(同步)
var $ = require("jquery");
var myModule = require("my-module");

require.resolve通过模块的id(同步)

exports导出方式
exports === module.exports === {}
用白话讲就是,exports只辅助module.exports操作内存中的数据,辛辛苦苦各种操作数据完,
累得要死,结果到最后真正被require出去的内容还是module.exports的,真是好苦逼啊

 

3:AMD

define引入
define(['jquery', 'my-module'], function($, myModule) {
  // 使用 $ 和 myModule 做一些操作……

  // 导出一个函数
  return function doSomething() {
    // ...
  };
});

 

4:@import
@import statement inside of a css/sass/less file.

 

5:样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)
image url in a stylesheet (url(...)) or html (<img src=...>) file

 

6:总结
require: node 和 es6 都支持的引入
export / import / export default : 只有es6 支持的导出引入
module.exports / exports: 只有 node 支持的导出

 

上一篇:webpack常用配置总览


下一篇:webpack是如何实现模块化加载的