标签：const compilation module 编译 webpack 模块 流程 compiler

Question 2： webpack的编译流程是啥？

应该会有面试官这样问过你：

• webpack了解多少？
• 对webpack的编译原理了解吗？
• 写过webpack插件吗？
• 列举webpack编译流程中的hook节点

这些问题其实都可以被看作是同一个问题，那就是面试官在问你：你对webpack的编译流程了解多少？

来总结一下我听到过的答案，尽量完全复原候选人面试的时候说的原话。

答案1: webpack就是通过loader来加载资源，通过插件进行修改，最后打包生成bundles.js

答案2: Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程:

    1. 初始化参数:从配置文件和 Shell 语句中读取与合并参数，得出最终的参数;
    2. 开始编译:用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译;
    3. 确定入口: 根据配置中的 entry 找出所有的入口文件;
    4. 编译模块: 从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模
      块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;
    5. 完成模块编译: 在经过第 4 步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内
      容以及它们之间的依赖关系;
    6. 输出资源:根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个
    Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会;
    7. 输出完成:在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系
    统。
    
    
复制代码

哇哦！ 这说起来一套一套的，有备而来啊！ 这是从哪背的书？这时候，敢这么回答，那一定是作死现场。因为面试官一定会衍生出一系列问题，把你问哭。例如：

• 你刚说的输出列表是什么？ - 其实是在问chunks是挂在哪个对象上。
• 入口模块是怎么处理的？ - 其实在问如何生成入口模块的
• 最后是怎么把文件内容写入到文件系统的？ - 其实是在问compiler是如何具备文件读写能力的
• 什么时候构建阶段开始？ - 其实是在问webpack开始构建之前做了哪些构建准备
• 你说的调用Loader对模块进行翻译是如何做到的？ - 其实是在问在哪个阶段处理loader的
• ……

所以，你感觉快哭了没？我给你讲一个我的答案可好？

面试其实是门很纠结的艺术。webpack东西那么多，不是三两句就能讲明白的。 所以如何花最少的时间尽量多的讲清楚内容，就是需要你认真琢磨的事情了。

答案3: 先把关键点说清楚，带源码那种，而且是越直观越好。以下1-4点花30秒说完吧，毕竟是说给面试官听。

1. 初始化参数，webpack.config.js 的module.export ，结合默认参数，merge出最终的参数。
2. 开始编译，通过初始化参数来实例化 Compiler对象，加载所有配置的插件，执行对象的run方法。
3. 确认入口文件。
4. 编译模块：从入口文件出发，调用所有配置的Loader对模块进行加载，再找出该模块依赖的模块。通过递归这个过程直到所有入口文件都经过处理，得到一条依赖线。
5. webpack.js 中核心的操作就是 require 了 node_modules/webpack-cli/bin/cli.js
   • cli.js
     • 01 当前文件一般有二个操作，处理参数，将参数交给不同的逻辑（分发业务）
     • 02 options （初始化参数）
     • 03 complier （实例化 Compiler对象）
     • 04 complier.run( 那 run 里面做了什么，后续再看 )
   • 实例化complier对象，complier会贯穿整个webpack工作流的过程。
     • complier继承Tabable，所以complier具有操作钩子的能力。例如监听、触发事件，而webpack是个事件流。
     • 实例话complier对象时，会把很多属性挂载上去。其中NodeEnvironmentPlugin让complier具备文件读写的能力。
     • 将plugins中的插件都挂载到了cpmplier身上
     • 将内部默认的plugins与complier建立联系，其中有个EntryOptionsPlugin处理了入口模块的id
     • 在webpack/lib/SingleEntryPlugin.js里，compiler监听了make钩子
       • 在singleEntryPlugin.js 模块的apply方法中有两个钩子监听
       • dep = SingleEntryPlugin.createDependency(entry,name)
       • 其中compilation钩子就是让compilation具备了利用normalModuleFactory工厂创建一个普通模块的能力。因为compilation就是利用自己创建出来的模块来加载需要被打包的模块。
       • 其中make钩子在Compiler.run 的时候会被调用，到这里就意味着某个模块执行打包之前的所有准备工作就做完了。
       • 然后Compilation调用addEntry就标志着make构建阶段开始了。
     • run方法的执行
       • 刚说了Compiler.run方法执行会调用make钩子，那run方法里就是有一堆钩子按着顺序触发，例如 beforeRun、run、compile
       • compile 方法的执行
         • 先准备些参数，例如刚才提到的 normalModuleFactory，用于后续创建模块。
         • 触发 beforeCompile
         • 将准备参数传入一个方法（newCompilation），用于创建一个compilation。在 newCompilation 内部，先调用 createCompilation，然后触发this.compilation钩子和compilation 钩子的监听
       • 创建了compilation对象之后就触发了make钩子。当触发 make 钩子监听的时候，会将 compilation 对象传入。 compilation.addEntry 就意味着make构建阶段开始。
       • make 钩子被触发，接收到 compilation 对象，那么从 compilation 可以解构出三个值。entry：当前被打包模块的相对路径，name，context：当前项目的跟路径
       • processDependencies 处理模块间的依赖关系。函数内部通过async.forEach来递归创建每个被加载进来的模块。
       • compilation 调用 addEntry 方法，内部调用_addModuleChain方法去处理依赖。
       • compilation 当中可以通过 normalModuleFactory 工厂来创建一个普通的模块对象。 webpack 内部默认开启来一个100并发量的打包操作. 源码里看到的是normalModuleFactory.create这样一个方法。
       • 然后在 beforeResolve 方法里会触发一个 factory 钩子监听。上述操作完成后，factory 获取到一个函数并对其进行调用。函数中又有一个resolver钩子被触发，resolver其实是处理loader。当触发resolver钩子，就意味着所有的Loader处理完毕。
       • 接下里就会触发 afterResolve 这个钩子，调用 new NormalModule
       • 最后就是调用 buildModule 方法开始编译 -> 调用build -> 调用doBuild。bulid过程中会将js代码转化成ast语法树，如果当前js模块引用了其它模块，那就需要递归重复 bulid。当前所有入口模块都被存放在 compilation 对象的 entries 数组里。
       • 那我还需要对当前模块的ast语法树进行一些修改，再转化回js代码。例如将require转化成__webpack_require__
       • 最后compile方法最后调用compilation.seal方法去处理chunk。 生成代码内容，最终输出文件到指定打包路径下。

唉。 哭了没。 面试的时候千万别讲这么细，因为面试官也细节不到这个程度。所以，你要讲的话，就把你认为重要话术整理出来吧。

接下来直接上代码，我们自己来实现webpack编译流程

• run.js

let webpack = require('./youWebpack')
let options = require('./webpack.config')

let compiler = webpack(options); // webpack 初始化 webpack.config.js 的 module.exports 

// 执行run方法
compiler.run((err, stats) => {
  console.log(err)
  console.log(stats)
})
复制代码

• 既然run方法require了 youWebpack，那就得写出来不是。

/*
* youWebpack.js
*/ 

const Compiler = require('./Compiler'); 
const NodeEnvironmentPlugin = require('./NodeEnvironmentPlugin')
const WebpackOptionsApply = require('./WebpackOptionsApply')

const webpack = function (options) {
  // 01 实例化 compiler 对象
  let compiler = new Compiler(options.context)
  compiler.options = options

  // 02 初始化 NodeEnvironmentPlugin(让compiler具体文件读写能力)
  new NodeEnvironmentPlugin().apply(compiler)

  // 03 挂载所有 plugins 插件至 compiler 对象身上 
  if (options.plugins && Array.isArray(options.plugins)) {
    for (const plugin of options.plugins) {
      plugin.apply(compiler)
    }
  }

  // 04 挂载所有 webpack 内置的插件（入口）
  new WebpackOptionsApply().process(options, compiler);

  // 05 返回 compiler 对象即可
  return compiler
}

module.exports = webpack
复制代码

• 你细品，youWebpack里有require了 Compiler、NodeEnvironmentPlugin、WebpackOptionsApply。 没办法，继续得写出来。

/*
* WebpackOptionsApply.js
*/
const EntryOptionPlugin = require("./EntryOptionPlugin")

class WebpackOptionsApply {
  process(options, compiler) {
    new EntryOptionPlugin().apply(compiler)
    compiler.hooks.entryOption.call(options.context, options.entry)
  }
}

module.exports = WebpackOptionsApply

复制代码

/*
* NodeEnvironmentPlugin.js
*/
const fs = require('fs'); // webpack为提升文件读写性能， 源码里是对 node 的 fs 模块进行了二次封装的。我们这勉强够用，就不封装了。 /捂脸

class NodeEnvironmentPlugin {
  constructor(options) {
    this.options = options || {}
  }

  apply(complier) {
    complier.inputFileSystem = fs
    complier.outputFileSystem = fs
  }
}

module.exports = NodeEnvironmentPlugin

复制代码

Compiler，webpack 核心之一的Compiler来了。

/*
* Compiler
*/
const {
  Tapable,
  SyncHook,
  SyncBailHook,
  AsyncSeriesHook,
  AsyncParallelHook
} = require('tapable')

const path = require('path')
const mkdirp = require('mkdirp')
const Stats = require('./Stats')
const NormalModuleFactory = require('./NormalModuleFactory')
const Compilation = require('./Compilation')
const { emit } = require('process')

class Compiler extends Tapable {
  constructor(context) {
    super()
    this.context = context
    this.hooks = {
      done: new AsyncSeriesHook(["stats"]),
      entryOption: new SyncBailHook(["context", "entry"]),

      beforeRun: new AsyncSeriesHook(["compiler"]),
      run: new AsyncSeriesHook(["compiler"]),

      thisCompilation: new SyncHook(["compilation", "params"]),
      compilation: new SyncHook(["compilation", "params"]),

      beforeCompile: new AsyncSeriesHook(["params"]),
      compile: new SyncHook(["params"]),
      make: new AsyncParallelHook(["compilation"]),
      afterCompile: new AsyncSeriesHook(["compilation"]),

      emit: new AsyncSeriesHook(['compilation'])
    }
  }

  emitAssets(compilation, callback) {
    // 当前需要做的核心： 01 创建dist  02 在目录创建完成之后执行文件的写操作

    // 01 定义一个工具方法用于执行文件的生成操作
    const emitFlies = (err) => {
      const assets = compilation.assets
      let outputPath = this.options.output.path

      for (let file in assets) {
        let source = assets[file]
        let targetPath = path.posix.join(outputPath, file)
        this.outputFileSystem.writeFileSync(targetPath, source, 'utf8')
      }

      callback(err)
    }

    // 创建目录之后启动文件写入
    this.hooks.emit.callAsync(compilation, (err) => {
      mkdirp.sync(this.options.output.path)
      emitFlies()
    })

  }

  run(callback) {
    console.log('run 方法执行了~~~~')

    const finalCallback = function (err, stats) {
      callback(err, stats)
    }

    const onCompiled = (err, compilation) => {

      // 最终在这里将处理好的 chunk 写入到指定的文件然后输出至 dist 
      this.emitAssets(compilation, (err) => {
        let stats = new Stats(compilation)
        finalCallback(err, stats)
      })
    }

    this.hooks.beforeRun.callAsync(this, (err) => {
      this.hooks.run.callAsync(this, (err) => {
        this.compile(onCompiled)
      })
    })
  }

  compile(callback) {
    const params = this.newCompilationParams()

    this.hooks.beforeRun.callAsync(params, (err) => {
      this.hooks.compile.call(params)
      const compilation = this.newCompilation(params)

      this.hooks.make.callAsync(compilation, (err) => {
        // console.log('make钩子监听触发了~~~~~')
        // callback(err, compilation)

        // 在这里我们开始处理 chunk 
        compilation.seal((err) => {
          this.hooks.afterCompile.callAsync(compilation, (err) => {
            callback(err, compilation)
          })
        })
      })
    })
  }

  newCompilationParams() {
    const params = {
      normalModuleFactory: new NormalModuleFactory()
    }

    return params
  }

  newCompilation(params) {
    const compilation = this.createCompilation()
    this.hooks.thisCompilation.call(compilation, params)
    this.hooks.compilation.call(compilation, params)
    return compilation
  }

  createCompilation() {
    return new Compilation(this)
  }
}

module.exports = Compiler

复制代码

• You look. 你还得自己实现 NormalModuleFactory 、 Compilation 、 Stats

/*
* Stats 其实看代码就能明白，Stats只是将compilation身上挂载的 入口模块、模块内容、chunks、文件目录等拿了出来。 这里可以回头看看run 方法
*/
class Stats {
  constructor(compilation) {
    this.entries = compilation.entries
    this.modules = compilation.modules
    this.chunks = compilation.chunks
    this.files = compilation.files
  }

  toJson() {
    return this
  }
}

module.exports = Stats

复制代码

/*
* NormalModuleFactory
*/

const NormalModule = require("./NormalModule"); 

class NormalModuleFactory {
  create(data) {
    return new NormalModule(data)
  }
  // 源码里头还实现了其它方法，所以这里不要嫌弃为什么又要单独require一个 NormalModule
}

module.exports = NormalModuleFactory

复制代码

webpack 核心之一 Compilation，至于它干嘛的？请你回头看看Stats就明白了。

const ejs = require('ejs')
const Chunk = require('./Chunk')
const path = require('path')
const async = require('neo-async')
const Parser = require('./Parser')
const NormalModuleFactory = require('./NormalModuleFactory')
const { Tapable, SyncHook } = require('tapable')

// 实例化一个 normalModuleFactory parser 
const normalModuleFactory = new NormalModuleFactory()
const parser = new Parser()

class Compilation extends Tapable {
  constructor(compiler) {
    super()
    this.compiler = compiler
    this.context = compiler.context
    this.options = compiler.options
    // 让 compilation 具备文件的读写能力
    this.inputFileSystem = compiler.inputFileSystem
    this.outputFileSystem = compiler.outputFileSystem
    this.entries = []  // 存入所有入口模块的数组
    this.modules = [] // 存放所有模块的数据
    this.chunks = []  // 存放当前次打包过程中所产出的 chunk
    this.assets = []
    this.files = []
    this.hooks = {
      succeedModule: new SyncHook(['module']),
      seal: new SyncHook(),
      beforeChunks: new SyncHook(),
      afterChunks: new SyncHook()
    }
  }

  /**
   * 完成模块编译操作
   * @param {*} context 当前项目的根
   * @param {*} entry 当前的入口的相对路径
   * @param {*} name chunkName main 
   * @param {*} callback 回调
   */
  addEntry(context, entry, name, callback) {
    this._addModuleChain(context, entry, name, (err, module) => {
      callback(err, module)
    })
  }

  _addModuleChain(context, entry, name, callback) {
    this.createModule({
      parser,
      name: name,
      context: context,
      rawRequest: entry,
      resource: path.posix.join(context, entry),
      moduleId: './' + path.posix.relative(context, path.posix.join(context, entry))
    }, (entryModule) => {
      this.entries.push(entryModule)
    }, callback)
  }

  /**
   * 定义一个创建模块的方法，达到复用的目的
   * @param {*} data 创建模块时所需要的一些属性值 
   * @param {*} doAddEntry 可选参数，在加载入口模块的时候，将入口模块的id 写入 this.entries 
   * @param {*} callback 
   */
  createModule(data, doAddEntry, callback) {
    let module = normalModuleFactory.create(data)

    const afterBuild = (err, module) => {
      // 在 afterBuild 当中我们就需要判断一下，当前次module 加载完成之后是否需要处理依赖加载
      if (module.dependencies.length > 0) {
        // 当前逻辑就表示module 有需要依赖加载的模块，因此我们可以再单独定义一个方法来实现
        this.processDependencies(module, (err) => {
          callback(err, module)
        })
      } else {
        callback(err, module)
      }
    }

    this.buildModule(module, afterBuild)

    // 当我们完成了本次的 build 操作之后将 module 进行保存
    doAddEntry && doAddEntry(module)
    this.modules.push(module)
  }

  /**
   * 完成具体的 build 行为
   * @param {*} module 当前需要被编译的模块
   * @param {*} callback 
   */
  buildModule(module, callback) {
    module.build(this, (err) => {
      // 如果代码走到这里就意味着当前 Module 的编译完成了
      this.hooks.succeedModule.call(module)
      callback(err, module)
    })
  }

  processDependencies(module, callback) {
    // 1 当前的函数核心功能就是实现一个被依赖模块的递归加载
    // 2 加载模块的思想都是创建一个模块，然后想办法将被加载模块的内容拿进来?
    // 3 当前我们不知道 module 需要依赖几个模块， 此时我们需要想办法让所有的被依赖的模块都加载完成之后再执行 callback？【 neo-async 】
    let dependencies = module.dependencies

    async.forEach(dependencies, (dependency, done) => {
      this.createModule({
        parser,
        name: dependency.name,
        context: dependency.context,
        rawRequest: dependency.rawRequest,
        moduleId: dependency.moduleId,
        resource: dependency.resource
      }, null, done)
    }, callback)
  }

  seal(callback) {
    this.hooks.seal.call()
    this.hooks.beforeChunks.call()

    // 1 当前所有的入口模块都被存放在了 compilation 对象的 entries 数组里
    // 2 所谓封装 chunk 指的就是依据某个入口，然后找到它的所有依赖，将它们的源代码放在一起，之后再做合并

    for (const entryModule of this.) {
      // 核心： 创建模块加载已有模块的内容，同时记录模块信息 
      const chunk = new Chunk(entryModule)

      // 保存 chunk 信息
      this.chunks.push(chunk)

      // 给 chunk 属性赋值 
      chunk.modules = this.modules.filter(module => module.name === chunk.name)

    }

    // chunk 流程梳理之后就进入到 chunk 代码处理环节（模板文件 + 模块中的源代码==》chunk.js)
    this.hooks.afterChunks.call(this.chunks)

    // 生成代码内容
    this.createChunkAssets()

    callback()
  }

  createChunkAssets() {
    for (let i = 0; i < this.chunks.length; i++) {
      const chunk = this.chunks[i]
      const fileName = chunk.name + '.js'
      chunk.files.push(fileName)

      // 1 获取模板文件的路径
      let tempPath = path.posix.join(__dirname, 'temp/main.ejs')
      // 2 读取模块文件中的内容
      let tempCode = this.inputFileSystem.readFileSync(tempPath, 'utf8')
      // 3 获取渲染函数
      let tempRender = ejs.compile(tempCode)
      // 4 按ejs的语法渲染数据
      let source = tempRender({
        entryModuleId: chunk.entryModule.moduleId,
        modules: chunk.modules
      })

      // 输出文件
      this.emitAssets(fileName, source)

    }
  }

  emitAssets(fileName, source) {
    this.assets[fileName] = source
    this.files.push(fileName)
  }
}

module.exports = Compilation


复制代码

还有部分就不写了。 像 Parser、 Chunk。

其实，主要是为懒，写得太累了， 我得去觅食了。好了，开玩笑。主要webpack整个编译过程到这应该就完全明白了。。

小结一下

webpack编译过程是啥？ 代码里应该体现得非常清楚了。

step1: 实例化compiler

1. 实例化 compiler 对象
2. 初始化 NodeEnvironmentPlugin(让compiler具体文件读写能力)
3. 挂载所有 plugins 插件至 compiler 对象身上
4. 挂载所有 webpack 内置的插件（入口）

step2: compiler.run

1. this.hooks.beforeRun.callAsync -> this.hooks.run.callAsync -> this.compile

   • this.compile 接收 onCompiled

   • onCompiled 内容是： 最终在这里将处理好的 chunk 写入到指定的文件然后输出至 dist （文件输出路径，不一定是dist）

step3: compile方法做的事情

1. newCompilationParams，实例化Compilation对象之前先初始化其所需参数
2. 调用this.hooks.beforeRun.callAsync
   • this.newCompilation(params) 实例化Compilation对象
   • this.hooks.make.callAsync 触发make钩子监听
   • compilation.seal 开始处理 chunk
     • this.hooks.afterCompile.callAsync(compilation,...)
     • 流程进入compilation了。。。

step4: 完成模块编译操作

1. addEntry
   • _addModuleChain
     • createModule：定义一个创建模块的方法，达到复用的目的
       • module = normalModuleFactory.create(data) ： 创建普通模块，目的是用来加载js模块
       • afterBuild
         • this.processDependencies ： 找到模块与模块之间的依赖关系
         • this.buildModule(module, afterBuild)
           • module.build : 到这里就意味着当前 Module 的编译完成了
2. seal: 生成代码内容,输出文件

Over.

作者：在剥我的壳
链接：https://juejin.cn/post/6972378623281987621
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

标签：const,compilation,module,编译,webpack,模块,流程,compiler
来源： https://www.cnblogs.com/tkqq000/p/14876174.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。