webpack

腾讯面试官：兄弟，你说你会Webpack，那说说他的原理？

原理图解

1、首先肯定是要先解析入口文件entry，将其转为AST(抽象语法书)，使用@babel/parser
2、然后使用@babel/traverse去找出入口文件所有依赖模块
3、然后使用@babel/core+@babel/preset-env将入口文件的AST转为Code
4、将2中找到的入口文件的依赖模块，进行遍历递归，重复执行1，2，3
5。重写require函数，并与4中生成的递归关系图一起，输出到bundle中

截屏2021-07-21 上午7.39.26.png

代码实现

webpack具体实现原理是很复杂的，这里只是简单实现一下，让大家粗略了解一下，webpack是怎么运作的。在代码实现过程中，大家可以自己console.log一下，看看ast，dependcies，code这些具体长什么样，我这里就不展示了，自己去看会比较有成就感，嘿嘿！！

config.js

这个文件中模拟webpack的配置

const path = require('path')

module.exports = {

  entry: './src/index.js',

  output: {

    path: path.resolve(__dirname, './dist'),

    filename: 'main.js'

  }

}

入口文件

src/index.js是入口文件

// src/index

import { age } from './aa.js'

import { name } from './hh.js'


console.log(`${name}今年${age}岁了`)


// src/aa.js

export const age = 18


// src/hh.js

console.log('我来了')

export const name = '林三心'

1. 定义Compiler类

// index.js

class Compiler {

  constructor(options) {

    // webpack 配置

    const { entry, output } = options

    // 入口

    this.entry = entry

    // 出口

    this.output = output

    // 模块

    this.modules = []

  }

  // 构建启动

  run() {}

  // 重写 require函数,输出bundle

  generate() {}

}

2. 解析入口文件,获取 AST

我们这里使用@babel/parser,这是babel7的工具,来帮助我们分析内部的语法,包括 es6,返回一个 AST 抽象语法树

const fs = require('fs')

const parser = require('@babel/parser')

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


const Parser = {

  getAst: path => {

    // 读取入口文件

    const content = fs.readFileSync(path, 'utf-8')

    // 将文件内容转为AST抽象语法树

    return parser.parse(content, {

      sourceType: 'module'

    })

  }

}


class Compiler {

  constructor(options) {

    // webpack 配置

    const { entry, output } = options

    // 入口

    this.entry = entry

    // 出口

    this.output = output

    // 模块

    this.modules = []

  }

  // 构建启动

  run() {

    const ast = Parser.getAst(this.entry)

  }

  // 重写 require函数,输出bundle

  generate() {}

}


new Compiler(options).run()

3. 找出所有依赖模块

Babel 提供了@babel/traverse(遍历)方法维护这 AST 树的整体状态,我们这里使用它来帮我们找出依赖模块。

const fs = require('fs')

const path = require('path')

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

const parser = require('@babel/parser')

const traverse = require('@babel/traverse').default


const Parser = {

  getAst: path => {

    // 读取入口文件

    const content = fs.readFileSync(path, 'utf-8')

    // 将文件内容转为AST抽象语法树

    return parser.parse(content, {

      sourceType: 'module'

    })

  },

  getDependecies: (ast, filename) => {

    const dependecies = {}

    // 遍历所有的 import 模块,存入dependecies

    traverse(ast, {

      // 类型为 ImportDeclaration 的 AST 节点 (即为import 语句)

      ImportDeclaration({ node }) {

        const dirname = path.dirname(filename)

        // 保存依赖模块路径,之后生成依赖关系图需要用到

        const filepath = './' + path.join(dirname, node.source.value)

        dependecies[node.source.value] = filepath

      }

    })

    return dependecies

  }

}


class Compiler {

  constructor(options) {

    // webpack 配置

    const { entry, output } = options

    // 入口

    this.entry = entry

    // 出口

    this.output = output

    // 模块

    this.modules = []

  }

  // 构建启动

  run() {

    const { getAst, getDependecies } = Parser

    const ast = getAst(this.entry)

    const dependecies = getDependecies(ast, this.entry)

  }

  // 重写 require函数,输出bundle

  generate() {}

}


new Compiler(options).run()

4. AST 转换为 code

将 AST 语法树转换为浏览器可执行代码,我们这里使用@babel/core 和 @babel/preset-env。

const fs = require('fs')

const path = require('path')

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

const parser = require('@babel/parser')

const traverse = require('@babel/traverse').default

const { transformFromAst } = require('@babel/core')


const Parser = {

  getAst: path => {

    // 读取入口文件

    const content = fs.readFileSync(path, 'utf-8')

    // 将文件内容转为AST抽象语法树

    return parser.parse(content, {

      sourceType: 'module'

    })

  },

  getDependecies: (ast, filename) => {

    const dependecies = {}

    // 遍历所有的 import 模块,存入dependecies

    traverse(ast, {

      // 类型为 ImportDeclaration 的 AST 节点 (即为import 语句)

      ImportDeclaration({ node }) {

        const dirname = path.dirname(filename)

        // 保存依赖模块路径,之后生成依赖关系图需要用到

        const filepath = './' + path.join(dirname, node.source.value)

        dependecies[node.source.value] = filepath

      }

    })

    return dependecies

  },

  getCode: ast => {

    // AST转换为code

    const { code } = transformFromAst(ast, null, {

      presets: ['@babel/preset-env']

    })

    return code

  }

}


class Compiler {

  constructor(options) {

    // webpack 配置

    const { entry, output } = options

    // 入口

    this.entry = entry

    // 出口

    this.output = output

    // 模块

    this.modules = []

  }

  // 构建启动

  run() {

    const { getAst, getDependecies, getCode } = Parser

    const ast = getAst(this.entry)

    const dependecies = getDependecies(ast, this.entry)

    const code = getCode(ast)

  }

  // 重写 require函数,输出bundle

  generate() {}

}


new Compiler(options).run()

5. 递归解析所有依赖项,生成依赖关系图

const fs = require('fs')

const path = require('path')

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

const parser = require('@babel/parser')

const traverse = require('@babel/traverse').default

const { transformFromAst } = require('@babel/core')


const Parser = {

  getAst: path => {

    // 读取入口文件

    const content = fs.readFileSync(path, 'utf-8')

    // 将文件内容转为AST抽象语法树

    return parser.parse(content, {

      sourceType: 'module'

    })

  },

  getDependecies: (ast, filename) => {

    const dependecies = {}

    // 遍历所有的 import 模块,存入dependecies

    traverse(ast, {

      // 类型为 ImportDeclaration 的 AST 节点 (即为import 语句)

      ImportDeclaration({ node }) {

        const dirname = path.dirname(filename)

        // 保存依赖模块路径,之后生成依赖关系图需要用到

        const filepath = './' + path.join(dirname, node.source.value)

        dependecies[node.source.value] = filepath

      }

    })

    return dependecies

  },

  getCode: ast => {

    // AST转换为code

    const { code } = transformFromAst(ast, null, {

      presets: ['@babel/preset-env']

    })

    return code

  }

}


class Compiler {

  constructor(options) {

    // webpack 配置

    const { entry, output } = options

    // 入口

    this.entry = entry

    // 出口

    this.output = output

    // 模块

    this.modules = []

  }

  // 构建启动

  run() {

    // 解析入口文件

    const info = this.build(this.entry)

    this.modules.push(info)

    this.modules.forEach(({ dependecies }) => {

      // 判断有依赖对象,递归解析所有依赖项

      if (dependecies) {

        for (const dependency in dependecies) {

          this.modules.push(this.build(dependecies[dependency]))

        }

      }

    })

    // 生成依赖关系图

    const dependencyGraph = this.modules.reduce(

      (graph, item) => ({

        ...graph,

        // 使用文件路径作为每个模块的唯一标识符,保存对应模块的依赖对象和文件内容

        [item.filename]: {

          dependecies: item.dependecies,

          code: item.code

        }

      }),

      {}

    )

  }

  build(filename) {

    const { getAst, getDependecies, getCode } = Parser

    const ast = getAst(filename)

    const dependecies = getDependecies(ast, filename)

    const code = getCode(ast)

    return {

      // 文件路径,可以作为每个模块的唯一标识符

      filename,

      // 依赖对象,保存着依赖模块路径

      dependecies,

      // 文件内容

      code

    }

  }

  // 重写 require函数,输出bundle

  generate() {}

}


new Compiler(options).run()

6. 重写 require 函数,输出 bundle

const fs = require('fs')

const path = require('path')

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

const parser = require('@babel/parser')

const traverse = require('@babel/traverse').default

const { transformFromAst } = require('@babel/core')


const Parser = {

  getAst: path => {

    // 读取入口文件

    const content = fs.readFileSync(path, 'utf-8')

    // 将文件内容转为AST抽象语法树

    return parser.parse(content, {

      sourceType: 'module'

    })

  },

  getDependecies: (ast, filename) => {

    const dependecies = {}

    // 遍历所有的 import 模块,存入dependecies

    traverse(ast, {

      // 类型为 ImportDeclaration 的 AST 节点 (即为import 语句)

      ImportDeclaration({ node }) {

        const dirname = path.dirname(filename)

        // 保存依赖模块路径,之后生成依赖关系图需要用到

        const filepath = './' + path.join(dirname, node.source.value)

        dependecies[node.source.value] = filepath

      }

    })

    return dependecies

  },

  getCode: ast => {

    // AST转换为code

    const { code } = transformFromAst(ast, null, {

      presets: ['@babel/preset-env']

    })

    return code

  }

}


class Compiler {

  constructor(options) {

    // webpack 配置

    const { entry, output } = options

    // 入口

    this.entry = entry

    // 出口

    this.output = output

    // 模块

    this.modules = []

  }

  // 构建启动

  run() {

    // 解析入口文件

    const info = this.build(this.entry)

    this.modules.push(info)

    this.modules.forEach(({ dependecies }) => {

      // 判断有依赖对象,递归解析所有依赖项

      if (dependecies) {

        for (const dependency in dependecies) {

          this.modules.push(this.build(dependecies[dependency]))

        }

      }

    })

    // 生成依赖关系图

    const dependencyGraph = this.modules.reduce(

      (graph, item) => ({

        ...graph,

        // 使用文件路径作为每个模块的唯一标识符,保存对应模块的依赖对象和文件内容

        [item.filename]: {

          dependecies: item.dependecies,

          code: item.code

        }

      }),

      {}

    )

    this.generate(dependencyGraph)

  }

  build(filename) {

    const { getAst, getDependecies, getCode } = Parser

    const ast = getAst(filename)

    const dependecies = getDependecies(ast, filename)

    const code = getCode(ast)

    return {

      // 文件路径,可以作为每个模块的唯一标识符

      filename,

      // 依赖对象,保存着依赖模块路径

      dependecies,

      // 文件内容

      code

    }

  }

  // 重写 require函数 (浏览器不能识别commonjs语法),输出bundle

  generate(code) {

    // 输出文件路径

    const filePath = path.join(this.output.path, this.output.filename)

    // 懵逼了吗? 没事,下一节我们捋一捋

    const bundle = `(function(graph){

      function require(module){

        function localRequire(relativePath){

          return require(graph[module].dependecies[relativePath])

        }

        var exports = {};

        (function(require,exports,code){

          eval(code)

        })(localRequire,exports,graph[module].code);

        return exports;

      }

      require('${this.entry}')

    })(${JSON.stringify(code)})`


    // 把文件内容写入到文件系统

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

  }

}


new Compiler(options).run()

7. 看看main里的代码

实现了上面的代码，也就实现了把打包后的代码写到main.js文件里，咱们来看看那main.js文件里的代码吧：

(function(graph){

      function require(module){

        function localRequire(relativePath){

          return require(graph[module].dependecies[relativePath])

        }

        var exports = {};

        (function(require,exports,code){

          eval(code)

        })(localRequire,exports,graph[module].code);

        return exports;

      }

      require('./src/index.js')

    })({

      "./src/index.js": {

          "dependecies": {

              "./aa.js": "./src\\aa.js",

              "./hh.js": "./src\\hh.js"

          },

          "code": "\"use strict\";\n\nvar _aa = require(\"./aa.js\");\n\nvar _hh = require(\"./hh.js\");\n\nconsole.log(\"\".concat(_hh.name, \"\\u4ECA\\u5E74\").concat(_aa.age, \"\\u5C81\\u4E86\"));"

      },

      "./src\\aa.js": {

          "dependecies": {},

          "code": "\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.age = void 0;\nvar age = 18;\nexports.age = age;"

      },

      "./src\\hh.js": {

          "dependecies": {},

          "code": "\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.name = void 0;\nconsole.log('我来了');\nvar name = '林三心';\nexports.name = name;"

      }

  })

大家可以执行一下main.js的代码，输出结果是：

我来了

林三心今年18岁了

结语

webpack具体实现原理是很复杂的，这里只是简单实现一下，让大家粗略了解一下，webpack是怎么运作的。在代码实现过程中，大家可以自己console.log一下，看看ast，dependcies，code这些具体长什么样，我这里就不展示了，自己去看会比较有成就感，嘿嘿！！

链接：https://juejin.cn/post/6987180860852142093

0

2021-07-21

0 个评论

要回复文章请先登录或注册