webpack 打包 bundle 原理分析

const compier = webpack(options)
compier.run()

通过 webpack 生命周期概率，可以知道打包大致过程

• 读取到配置的入口
  • 入口模板的路径
  • 模块分析
    • 模块依赖（依赖的路径）
      • 可以用递归的方式处理依赖模块
    • 内容处理（处理后的内容代码）
    • 依赖图谱对象
  • webpackBootstrap 入口函数
• 读取到配置的出口
  • 生产文件
    • 文件存放的位置

根据以上的分析，编写一个自定义 webpack 打包文件

编写自定义 webpack 打包项目

新增 webpack.config.js, 跟 webpack 默认配置一样

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'), // 输出的文件目录，必须是绝对路径
    filename: 'main.js' // 输出的文件名称
  },
  mode: 'development'
}

在此之前，先安装 @babel 库

npm i -D @babel/parser @babel/traverse @babel/core @babel/preset-env

@babel/parser 来支持解析内容转 ast 树方便解析
@babel/traverse 来可以过滤 ast 树
@babel/core 和 @babel/preset-env 将 ast 转为 js
Ast 抽象语法书：以 node 节点为单位的 tree 树结构

新建 /lib/webpack.js, 打包的核心文件

const fs = require('fs')
const path = require('path')
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const {transformFromAst} = require('@babel/core')

module.exports = class webpack {
  constructor(options) {
    // console.log(options)
    const {entry, output} = options
    this.entry = entry
    this.output = output
    this.modules = []
  }

  run() {
    const info = this.parse(this.entry)

    // 输出依赖图谱
    this.modules.push(info)
    for (let i = 0; i < this.modules.length; i++) {
      const item = this.modules[i]
      const {yilai} = item

      for (let j in yilai) {
        this.modules.push(this.parse(yilai[j]))
      }
    }

    // 数据结构转换 arr->obj
    const obj = {}
    this.modules.forEach(item => {
      obj[item.entryFile] = item
    })

    this.file(obj)
  }

  parse(entryFile) {
    // 读取入口文件
    const content = fs.readFileSync(entryFile, 'utf-8')

    // 解析内容为 ast 树
    const ast = parser.parse(content, {sourceType: 'module'})

    // 过滤 ast 树
    const dirname = path.dirname(entryFile)

    //分析依赖 以及依赖路径
    // 内容处理
    const yilai = {}
    traverse(ast, {
      ImportDeclaration({node}) {
        const newPathName = './' + path.join(dirname, node.source.value)
        yilai[node.source.value] = newPathName
      }
    })

    // ast 转 js
    const {code} = transformFromAst(ast, null, {
      presets: ['@babel/preset-env']
    })

    return {
      entryFile,
      yilai,
      code
    }
  }

  file(code) {
    // 生产文件，放入到 dist 的目录
    const filePath = path.join(this.output.path, this.output.filename)

    // 生产 bundle 文件内容
    const newCode = JSON.stringify(code)

    const bundle = `(function (modules) {
      function require(module) {
        function pathRequire(relaPath) {
          // relaPath: ./a.js -> ./src/a.js
          return require(modules[module].yilai[relaPath])
        }
        const exports = {};
        (function (require,exports, code) {
          eval(code)
        })(pathRequire,exports, modules[module].code)
        
        return exports
      }

      require('${this.entry}')
    })(${newCode})`

    // webpackBootstrap
    fs.writeFileSync(filePath, bundle, 'utf-8')
  }
}

以下测试代码，新建 src/b.js

export const strb = 'b.js'

新建 src/a.js

import {strb} from "./b.js";
export const stra = 'a.js' + strb

新建入口文件 src/index.js

import {stra} from './a.js'
console.log(stra + 'index.js')

最后新建打包文件 bundle.js

const webapck = require('./lib/webpack')
const options = require('./webpack.config')

new webapck(options).run();

执行 node bundle.js, 即可生产 ./dist/main.js

(function (modules) {
      function require(module) {
        function pathRequire(relaPath) {
          // relaPath: ./a.js -> ./src/a.js
          return require(modules[module].yilai[relaPath])
        }
        const exports = {};
        (function (require,exports, code) {
          eval(code)
        })(pathRequire,exports, modules[module].code)
        
        return exports
      }

      require('./src/index.js')
    })({"./src/index.js":{"entryFile":"./src/index.js","yilai":{"./a.js":"./src\\a.js"},"code":"\"use strict\";\n\nvar _a = require(\"./a.js\");\n\nconsole.log(_a.stra + 'index.js');"},"./src\\a.js":{"entryFile":"./src\\a.js","yilai":{"./b.js":"./src\\b.js"},"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.stra = void 0;\n\nvar _b = require(\"./b.js\");\n\nvar stra = 'a.js' + _b.strb;\nexports.stra = stra;"},"./src\\b.js":{"entryFile":"./src\\b.js","yilai":{},"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.strb = void 0;\nvar strb = 'b.js';\nexports.strb = strb;"}})

运行以上代码结果

a.jsb.jsindex.js