Mini-pack

与rollup不同，webpack主要通过转移成commonjs的iife形式生成bundle代码。

1. 通过arcon分析入口代码，生成module

{
  id: 0,
  code: '',
  path: '',
  deps: []
}

2. 继续遍历deps，继续生成assert，生成一个依赖图

const absolutePath = path.dirname(assets.path)
const child = createAssets(path.join(absolutePath, relativePath))
assert.mapping:{
  [relativePath]: child .id
}

3. 生成bundle代码

let module;
module += {${module.id}: [
            function(require, module, exports) {
                ${mod.code}
            },
            ${JSON.stringify(mod.mapping)}
 ]},
const result = `(function(graph){
  function require(id) {
   const [fn, mapping] = graph[id]
    let module = {
        exports: {}
   }
   function localRequired(relativePath){
     return require(mapping[relativePath])
   }
   fn(localRequired, module, module.exports)
   return module.exports
  }
  require(0)
})(graph)`

reference：

https://www.youtube.com/watch?v=UNMkLHzofQI

手动将代码改变，演示的是加载过程和怎么整合代码，并演示了动态载入

https://www.bilibili.com/video/BV1ef4y1M7Dn?spm_id_from=333.999.0.0

通过ast的词法分析，将import动态转代码，没有演示动态载入

https://astexplorer.net/

在线观察ast