webpack 模块化加载文件解析
// 加载器runtime
(function (modules: Array<Function>) {
interface moduleType {
exports:any,
isLoad:Boolean,
id:string
}
const installModules : {[key: string]: moduleType} = {};
// 加载器
const _webpack_require_ = function (moduleId:string) {
// 已经加载直接返回
if (installModules[moduleId]) {
return installModules[moduleId].exports
}
// 初始化
const module = installModules[moduleId] = {
exports: {},
isLoad: false,
id: moduleId
}
// 加载文件
modules[moduleId].call(module.exports, module, module.exports, _webpack_require_)
module.isLoad = true
//返回导出的对象
return module.exports
}
// 加载唯一一个入口文件
return _webpack_require_(0)
}([
// 依赖数组
// 0
function (module, exports, _webpack_require_) {
const dependList = [_webpack_require_(1)]
const result = (function (dependResult) {
dependResult.aaa = 1
}).call(exports, dependList)
module.exports = result
},
// 1
function () {
}
]))
模块化的进程
- 原始模式,加载器选择通过<script>标签加载，然后通过各种hack判断是否加载完成。
- AMD => define({},function(dependList){}) // 依赖前置加载
- 引入服务端commonjs规范 => CMD => require() // 依赖就近加载
3)通用加载定义 Umd 兼容AMDHE CMD 优先AMD 其次CMD 最后挂在window上
js模块化是针对原始的script必须严格按照加载顺序加载,且在使用阶段的js必须在最后加载的一种解决方案
