通过 npx 或者 yarn 执行 webpack 命令，实际上是调用了 node_modules 文件下的 webpack cmd 文件，这个 cmd 文件里又组装了用 node 运行 /node_modules/webpack/bin/webpack.js 的命令。webpack.js 中又加载了 /node_modules/webpack/bin/webpack-cli/cli.js。cli.js 定义了一个自调用函数，接收并处理命令行参数，将参数分发给不同的业务。加载 webpack 打包配置 options，创建一个 compiler，执行 compiler 的 run 方法。
webpack 工作流程.svg
webpack 的编译流程可以看作事件驱动型事件流工作机制。核心的两个部分：负责编译的 compiler 和负责创建 bundles 的 compilation。

手写实现打包

基本框架

webpack库文件关系图.svg

SingleEntryPlugin

SingleEntryPlugin 类专门用于处理单入口，作用是给 make 和 compilation 钩子注册事件。

  1. class SingleEntryPlugin {
  2.   constructor(context, entry, name) {
  3.     // 挂载上下文、入口文件名、入口文件键名
  4.     this.context = context
  5.     this.entry = entry
  6.     this.name = name
  7.   }
  9.   apply(compiler) {
  10.     compiler.hooks.make.tapAsync('SingleEntryPlugin', (compilation, callback) => {
  11.       const { context, entry, name } = this
  12.       console.log('make 钩子监听执行了')
  13.       // compilation.addEntry(context, entry, name, callback)
  14.     })
  15.   }
  16. }
  18. module.exports = SingleEntryPlugin

EntryOptionPlugin

EntryOptionPlugin 是用于处理 webpack 入口文件的插件。作用是获取入口文件的路径和名称，传给其它的钩子，并在 make 钩子和 compilation 钩子注册事件监听。
手写实现：

  1. const SingleEntryPlugin = require("./SingleEntryPlugin")
  3. const itemToPlugin = function (context, item, name) {
  4.   return new SingleEntryPlugin(context, item, name)
  5. }
  7. class EntryOptionPlugin {
  8.   apply(compiler) {
  9.     compiler.hooks.entryOption.tap('EntryOptionPlugin', (context, entry) => {
  10.       itemToPlugin(context, entry, 'main').apply(compiler)
  11.     })
  12.   }
  13. }
  15. module.exports = EntryOptionPlugin

Compiler 类 的 Run 方法

run 方法是 webpack 的核心，里面定义了 finalCallback 方法（主要作用是对 callback 方法进行调用）和 onCompiled 方法（编译完成后调用的方法，里面会触发 done 钩子事件并调用 finalCallback 方法），然后依次触发了 beforeRun 和 run 钩子，run 钩子的触发回调函数里调用了 compile 方法，往 compile 传入 onCompiled 方法。

compile 方法

compile 方法包含了编译的过程。

  1. 调用 newCompilationParams 方法，返回 params，其中最主要的是 normalModuleFactory 实例。
  2. 触发 beforeCompile 钩子监听，在它的回调函数里又触发了 compile 钩子监听。
  3. 调用 newCompilation 方法，传入 params，返回一个 compilation 实例。
  4. 触发 make 钩子，传入 compilation 实例。

手写实现

Compiler.js：

  1. const {
  2.   Tapable,
  3.   SyncHook,
  4.   SyncBailHook,
  5.   AsyncParallelHook,
  6.   AsyncSeriesHook
  7. } = require("tapable")
  9. const Stats = require('./Stats')
  10. const Compilation = require("./Compilation")
  11. const NormalModuleFactory = require("./NormalModuleFactory")
  13. class Compiler extends Tapable {
  14.   constructor(context) {
  15.     super()
  16.     this.context = context
  17.     this.hooks = {
  18.       done: new AsyncSeriesHook(['stats']),
  20.       beforeRun: new AsyncSeriesHook(["compiler"]),
  21.       run: new AsyncSeriesHook(["compiler"]),
  23.       thisCompilation: new SyncHook(["compilation", "params"]),
  24.       compilation: new SyncHook(["compilation", "params"]),
  26.       beforeCompile: new AsyncSeriesHook(["params"]),
  27.       compile: new SyncHook(["params"]),
  28.       make: new AsyncParallelHook(["compilation"]),
  29.       afterCompile: new AsyncSeriesHook(["compilation"]),
  31.       entryOption: new SyncBailHook(["context", "entry"]),
  32.     }
  33.   }
  35.   run(callback) {
  36.     console.log('run 方法执行了')
  38.     const finalCallback = function (err, stats) {
  39.       return callback(err, stats)
  40.     }
  42.     const onCompiled = function (err, compilation) {
  43.       console.log('onCompiled~')
  44.       finalCallback(err, new Stats(compilation))
  45.     }
  47.     this.hooks.beforeRun.callAsync(this, (err) => {
  48.       this.hooks.run.callAsync(this, (err) => {
  49.         this.compile(onCompiled)
  50.       })
  51.     })
  52.   }
  54.   compile(callback) {
  55.     const params = this.newCompilationParams()
  57.     this.hooks.beforeRun.callAsync(params, (err) => {
  58.       this.hooks.compile.call(params)
  59.       const compilation = this.newCompilation(params)
  61.       this.hooks.make.callAsync(compilation, (err) => {
  62.         console.log('make 钩子监听触发了')
  63.         callback(err, compilation)
  64.       })
  65.     })
  66.   }
  68.   newCompilationParams() {
  69.     return {
  70.       normalModuleFactory: new NormalModuleFactory()
  71.     }
  72.   }
  74.   newCompilation(params) {
  75.     const compilation = this.createCompilation()
  76.     this.hooks.thisCompilation.call(compilation, params)
  77.     this.hooks.compilation.call(compilation, params)
  79.     return compilation
  80.   }
  82.   createCompilation() {
  83.     return new Compilation(this)
  84.   }
  85. }
  87. module.exports = Compiler

Stats.js：

  1. class Stats {
  2.   constructor(compilation) {
  3.     this.entries = compilation.entries
  4.     this.modules = compilation.modules
  5.   }
  7.   toJson() {
  8.     return this
  9.   }
  10. }
  12. module.exports = Stats

make 钩子执行前的流程

  1. 一、步骤
  2.   01 实例化 compiler 对象（ 它会贯穿整个webpack工作的过程 ）
  3.   02 由 compiler 调用 run 方法
  5. 二、compiler 实例化操作
  6.   01 compiler 继承 tapable，因此它具备钩子的操作能力（监听事件，触发事件，webpack是一个事件流）
  8.   02 在实例化了 compiler 对象之后就往它的身上挂载很多属性，其中 NodeEnvironmentPlugin 这个操作就让它具备了
  9.   文件读写的能力（我们的模拟时采用的是 node 自带的 fs )
  11.   03 具备了 fs 操作能力之后又将 plugins 中的插件都挂载到了 compiler 对象身上  
  13.   04 将内部默认的插件与 compiler 建立关系，其中 EntryOptionPlugin 处理了入口模块的 id 
  15.   05 在实例化 compiler 的时候只是监听了 make 钩子（SingleEntryPlugin)
  16.     5-1 在 SingleEntryPlugin 模块的 apply 方法中有二个钩子监听
  17.     5-2 其中 compilation 钩子就是让 compilation 具备了利用 normalModuleFactory 工厂创建一个普通模块的能力
  18.     5-3 因为它就是利用一个自己创建的模块来加载需要被打包的模块 
  19.     5-4 其中 make 钩子 在 compiler.run 的时候会被触发，走到这里就意味着某个模块执行打包之前的所有准备工作就完成了
  20.     5-5 addEntry 方法调用（）
  22. 三、run 方法执行（ 当前想看的是什么时候触发了 make 钩子 ）
  24.   01 run 方法里就是一堆钩子按着顺序触发（beforeRun run compile）
  26.   02 compile 方法执行
  27.     1 准备参数(其中 normalModuleFactory 是我们后续用于创建模块的)
  28.     2 触发beforeCompile
  29.     3 将第一步的参数传给一个函数，开始创建一个 compilation （newCompilation）
  30.     4 在调用 newCompilation 的内部
  31.       - 调用了 createCompilation 
  32.       - 触发了 this.compilation 钩子 和 compilation 钩子的监听
  33.   03 当创建了 compilation 对象之后就触发了 make 钩子
  35.   04 当我们触发 make 钩子监听的时候，将 compilation 对象传递了过去 
  37. 四、总结 
  39.   1 实例化 compiler  
  40.   2 调用 compile 方法
  41.   3 newCompilation 
  42.   4 实例化了一个compilation 对象（它和 compiler 是有关系）
  43.   5 触发 make 监听 
  44.   6 addEntry 方法（这个时候就带着 context name entry  一堆的东西） 就奔着编译去了.....

addEntry

方法流程

  1. 01 make 钩子在被触发的时候，接收到了 compilation 对象实现，它的身上挂载了很多内容
  3. 02 从 compilation 当中解构了三个值 
  4.   entry : 当前需要被打包的模块的相对路径（./src/index.js)
  5.   name: main 
  6.   context: 当前项目的根路径 
  8. 03 dep 是对当前的入口模块中的依赖关系进行处理 
  10. 04 调用了 addEntry 方法 
  12. 05 在 compilation实例的身上有一个 addEntry 方法，然后内部调用了 _addModuleChain 方法，去处理依赖
  14. 06 在 compilation 当中我们可以通过 NormalModuleFactory 工厂来创建一个普通的模块对象  
  16. 07 在 webpack 内部默认启了一个 100 并发量的打包操作，当前我们看到的是 normalModule.create()
  18. 08 在 beforeResolve 里面会触发一个 factory 钩子监听【 这个部分的操作其实是处理 loader， 当前我们重点去看 】
  20. 09 上述操作完成之后获取到了一个函数被存在 factory 里，然后对它进行了调用  
  22. 10 在这个函数调用里又触发了一个叫 resolver 的钩子（ 处理 loader的，拿到了 resolver方法就意味着所有的Loader 处理完毕 ）
  24. 11 调用 resolver() 方法之后，就会进入到  afterResolve 这个钩子里，然后就会触发  new NormalModule 
  26. 12 在完成上述操作之后就将module 进行了保存和一些其它属性的添加  
  28. 13 调用 buildModule 方法开始编译---》 调用 build ---》doBuild

手写实现

Compilation.js：

  1. const { Tapable, SyncHook } = require('tapable')
  2. const path = require('path')
  3. const NormalModuleFactory = require('./NormalModuleFactory')
  4. const Parser = require('./Parser')
  6. const normalModuleFactory = new NormalModuleFactory()
  7. const parser = new Parser()
  9. class Compilation extends Tapable {
  10.   constructor(compiler) {
  11.     super()
  12.     this.compiler = compiler
  13.     this.context = compiler.context
  14.     this.options = compiler.options
  15.     // 让 compilation 具备文件读写能力
  16.     this.inputFileSystem = compiler.inputFileSystem
  17.     this.outputFileSystem = compiler.outputFileSystem
  18.     this.entries = [] // 存放所有入口模块的数据
  19.     this.modules = [] // 存放所有模块的数据
  20.     this.hooks = {
  21.       succeedModule: new SyncHook(['module'])
  22.     }
  23.   }
  25.   // 01
  26.   /**
  27.    * 完成模块编译的操作
  28.    * @param {*} context 当前项目根目录
  29.    * @param {*} entry 当前入口文件的相对路径
  30.    * @param {*} name  chunkName main
  31.    * @param {*} callback 回调
  32.    */
  33.   addEntry(context, entry, name, callback) {
  34.     this._addModuleChain(context, entry, name, (err, module) => {
  35.       callback(err, module)
  36.     })
  37.   }
  39.   // 02
  40.   _addModuleChain (context, entry, name, callback) {
  41.     let entryModule = normalModuleFactory.create({
  42.       name,
  43.       context,
  44.       rawRequest: entry,
  45.       resource: path.posix.join(context, entry),  // 当前操作的核心作用就是返回 entry 入口的绝对路径
  46.       parser,
  47.     })
  49.     const afterBuild = function (err) {
  50.       callback(err, entryModule)
  51.     }
  53.     this.buildModule(entryModule, afterBuild)
  55.     // 当完成了本次的 build 操作后将 module 进行保存
  56.     this.entries.push(entryModule)
  57.     this.modules.push(entryModule)
  58.   }
  60.   // 03
  61.   /**
  62.    * 完成具体的 build 行为
  63.    * @param {*} module 当前需要被编译的模块
  64.    * @param {*} callback 
  65.    */
  66.   buildModule(module, callback) {
  67.     module.build(this, (err) => {
  68.       // 如果代码走到这里意味着 当前 module 的编译完成了
  69.       this.hooks.succeedModule.call(module)
  70.       callback(err)
  71.     })
  72.   }
  73. }
  75. module.exports = Compilation

Parser.js：

  1. const babylon = require('babylon')
  3. const { Tapable } = require('tapable')
  5. class Parser extends Tapable {
  6.   parse(source) {
  7.     return babylon.parse(
  8.       source,
  9.       {
  10.         sourceType: 'module',
  11.         plugins: ['dynamicImport']  // 当前插件可以支持 import() 动态导入的语法
  12.       }
  13.     )
  14.   }
  15. }
  17. module.exports = Parser

NormalModuleFactory.js：

  1. const NormalModule = require("./NormalModule")
  3. class NormalModuleFactory {
  4.   create(data) {
  5.     return new NormalModule(data)
  6.   }
  7. }
  9. module.exports = NormalModuleFactory

NormalModule.js：

  1. class NormalModule {
  2.   constructor(data) {
  3.     this.name = data.name
  4.     this.entry = data.entry
  5.     this.rawRequest = data.rawRequest
  6.     this.parser = data.parser
  7.     this.resource = data.resource
  8.     this._source  // 存放某个模块的源代码
  9.     this._ast // 存放某个模块源代码的ast
  10.   }
  12.   build(compilation, callback) {
  13.     /**
  14.      * 01 从文件中读取到将来需要被加载的 module 的内容
  15.      * 02 如果当前不是 js 模块则需要 loader 进行处理，最终返回 js 模块
  16.      * 03 上述的操作完成之后就可以将 js 代码转为 ast 语法树
  17.      * 04 当前 js 模块内部可能又引用了很多其他的模块，因此我们需要递归完成
  18.      * 05 前面的完成后，只需重复执行即可
  19.      */
  20.     this.doBuild(compilation, (err) => {
  21.       this._ast = this.parser.parse(this._source)
  22.       callback(err)
  23.     })
  24.   }
  26.   doBuild(compilation, callback) {
  27.     this.getSource(compilation, (err, source) => {
  28.       this._source = source
  29.       callback()
  30.     })
  31.   }
  33.   getSource(compilation, callback) {
  34.     compilation.inputFileSystem.readFile(this.resource, 'utf8', callback)
  35.   }
  36. }
  38. module.exports = NormalModule

依赖模块处理

  1. 处理依赖模块的相对路径和后缀，把源代码转成语法树进行一些操作。
  2. 需要将 index.js 里的 require 方法替换成 webpack_require 。对语法树进行修改，之后再转回成源代码。
  3. 实现递归的操作 ，所以要将依赖的模块信息保存好，方例交给下一次 create。

NormalModule.js对 doBuild 调用时的回调函数进行改造：

  1. const path = require('path')
  2. const types = require('@babel/types')
  3. const generator = require('@babel/generator').default
  4. const traverse = require('@babel/traverse').default
  6. class NormalModule {
  7.   constructor(data) {
  8.     this.context = data.context
  9.     this.name = data.name
  10.     // this.entry = data.entry
  11.     this.rawRequest = data.rawRequest
  12.     this.parser = data.parser
  13.     this.resource = data.resource
  14.     this._source  // 存放某个模块的源代码
  15.     this._ast // 存放某个模块源代码的ast
  16.     this.dependencies = [] // 定义一个空数组用于保存被依赖加载的模块信息
  17.   }
  19.   build(compilation, callback) {
  20.     /**
  21.      * 01 从文件中读取到将来需要被加载的 module 的内容
  22.      * 02 如果当前不是 js 模块则需要 loader 进行处理，最终返回 js 模块
  23.      * 03 上述的操作完成之后就可以将 js 代码转为 ast 语法树
  24.      * 04 当前 js 模块内部可能又引用了很多其他的模块，因此我们需要递归完成
  25.      * 05 前面的完成后，只需重复执行即可
  26.      */
  27.     this.doBuild(compilation, (err) => {
  28.       this._ast = this.parser.parse(this._source)
  29.       // 这里的 _ast 就是当前 module 的语法树，我们可以对它进行修改，最后将 ast 转回成 code 代码
  30.       traverse(this._ast, {
  31.         CallExpression: (nodePath) => {
  32.           let node = nodePath.node
  34.           // 定位 require 所在的节点
  35.           if (node.callee.name === 'require') {
  36.             // 获取原始请求路径
  37.             let modulePath = node.arguments[0].value // './title'
  39.             // 取出当前被加载的模块名称
  40.             let moduleName = modulePath.split(path.posix.sep).pop()  // title
  42.             // [当前打包器只处理 js]
  43.             let extName = moduleName.indexOf('.') == -1 ? '.js' : ''
  45.             moduleName += extName // title.js
  47.             // [最终想要读取当前 js 的内容] 所以需要绝对路径
  48.             let depResource = path.posix.join(path.posix.dirname(this.resource), moduleName)
  50.             //  [将当前模块的 id 定义 OK]
  51.             let depModuleId = './' + path.posix.relative(this.context, depResource)  // ./src/title.js
  53.             // 记录当前被依赖模块的信息，方便后面递归加载
  54.             this.dependencies.push({
  55.               name: this.name,
  56.               context: this.context,
  57.               rawRequest: moduleName,
  58.               moduleId: depModuleId,
  59.               resource: depResource,
  60.             })
  62.             // 替换内容
  63.             node.callee.name = '__webpack_require__'
  64.             node.arguments = [types.stringLiteral(depModuleId)]
  67.           }
  68.         }
  69.       })
  71.       // 上述操作是利用 ast 按要求做了修改，下面的内容就是利用 .... 将修改后的 ast 转回成 code
  72.       let { code } = generator(this._ast)
  73.       this._source = code
  75.       callback(err)
  76.     })
  77.   }
  79.   doBuild(compilation, callback) {
  80.     this.getSource(compilation, (err, source) => {
  81.       this._source = source
  82.       callback()
  83.     })
  84.   }
  86.   getSource(compilation, callback) {
  87.     compilation.inputFileSystem.readFile(this.resource, 'utf8', callback)
  88.   }
  89. }
  91. module.exports = NormalModule

方法Compilation.js 改造（_addModuleChain的函数体提取成 createModule ，新增 processDependencies 方法）：

  1. const { Tapable, SyncHook } = require('tapable')
  2. const async = require('neo-async')
  3. const path = require('path')
  4. const NormalModuleFactory = require('./NormalModuleFactory')
  5. const Parser = require('./Parser')
  7. const normalModuleFactory = new NormalModuleFactory()
  8. const parser = new Parser()
  10. class Compilation extends Tapable {
  11.   constructor(compiler) {
  12.     super()
  13.     this.compiler = compiler
  14.     this.context = compiler.context
  15.     this.options = compiler.options
  16.     // 让 compilation 具备文件读写能力
  17.     this.inputFileSystem = compiler.inputFileSystem
  18.     this.outputFileSystem = compiler.outputFileSystem
  19.     this.entries = [] // 存放所有入口模块的数据
  20.     this.modules = [] // 存放所有模块的数据
  21.     this.hooks = {
  22.       succeedModule: new SyncHook(['module'])
  23.     }
  24.   }
  26.   // 01
  27.   /**
  28.    * 完成模块编译的操作
  29.    * @param {*} context 当前项目根目录
  30.    * @param {*} entry 当前入口文件的相对路径
  31.    * @param {*} name  chunkName main
  32.    * @param {*} callback 回调
  33.    */
  34.   addEntry(context, entry, name, callback) {
  35.     this._addModuleChain(context, entry, name, (err, module) => {
  36.       callback(err, module)
  37.     })
  38.   }
  40.   // 02
  41.   _addModuleChain(context, entry, name, callback) {
  42.     this.createModule(
  43.       {
  44.         name: name,
  45.         context: context,
  46.         rawRequest: entry,
  47.         resource: path.posix.join(context, entry),
  48.         moduleId: './' + path.posix.relative(context, path.posix.join(context, entry)),
  49.         parser
  50.       }, (entryModule) => {
  51.         this.entries.push(entryModule)
  52.       },
  53.       callback)
  54.   }
  56.   /**
  57.    * 定义一个创建模块的方法，达到复用的目的
  58.    * @param {*} data 创建模块时需要的属性
  59.    * @param {*} doAddEntry 可选参数 在加载入口模块的时候，将入口模块的 id 写入 this.entries
  60.    * @param {*} callback 
  61.    */
  62.   createModule(data, doAddEntry, callback) {
  63.     let module = normalModuleFactory.create(data)
  65.     const afterBuild = (err, module) => {
  66.       // afterBuild 当中需要判断，当前 module 加载完成后是否需要处理依赖模块
  67.       if (module.dependencies.length > 0) {
  68.         // 当前逻辑表示 module 有需要加载的依赖模块，可以再单独定义一个方法来实现
  69.         this.processDependencies(module, (err) => {
  70.           callback()
  71.         })
  72.       } else {
  73.         callback(err, module)
  74.       }
  75.     }
  77.     this.buildModule(module, afterBuild)
  79.     // 当完成了本次的 build 操作后将 module 进行保存
  80.     doAddEntry && doAddEntry(module)
  81.     this.modules.push(module)
  82.   }
  84.   // 03
  85.   /**
  86.    * 完成具体的 build 行为
  87.    * @param {*} module 当前需要被编译的模块
  88.    * @param {*} callback 
  89.    */
  90.   buildModule(module, callback) {
  91.     module.build(this, (err) => {
  92.       // 如果代码走到这里意味着 当前 module 的编译完成了
  93.       this.hooks.succeedModule.call(module)
  94.       callback(err, module)
  95.     })
  96.   }
  98.   processDependencies(module, callback) {
  99.     // 01 当前的函数核心功能就是实现一个被依赖模块的递归加载
  100.     // 02 加载模块的思路都是创建一个模块，然后读取被加载模块的内容
  101.     // 03 当前不知道 module 需要依赖几个模块，需要让所有被依赖的模块都加载完成载执行 callback [neo-async]
  102.     let dependencies = module.dependencies
  104.     async.forEach(dependencies, (dependency, done) => {
  105.       this.createModule({
  106.         name: dependency.name,
  107.         context: dependency.context,
  108.         rawRequest: dependency.rawRequest,
  109.         moduleId: dependency.moduleId,
  110.         resource: dependency.resource,
  111.         parser,
  112.       }, null, done)
  113.     }, callback)
  114.   }
  115. }
  117. module.exports = Compilation

生成打包文件

生成 chunk 代码

和源代码不同，手写实现是通过模板文件渲染成的，在同一个目录下新建一个 temp 目录，把 webpack 打包的结果作为模板放入一个 ejs 文件，把入口文件模块 Id ，需要加载的模块的 Id 和内容，改成可以动态渲染。

  1. return __webpack_require__(__webpack_require__.s = '<%-entryModuleId%>') // 最后调用 __webpack_require__
  3. // 传入模块数组参数
  4. ({
  5.     <%for(let module of modules) {%>
  6.       "<%-module.moduleId%>":
  7.       (function (module, exports, __webpack_require__) {
  8.         <%-module._source%>
  9.       })
  10.     <%}%>
  12.   })

Compilation 新增一个方法：

  2.   createChunkAssets() {
  3.     for (let i = 0; i < this.chunks.length; i++) {
  4.       const chunk = this.chunks[i]
  6.       const fileName = chunk.name + '.js'
  8.       chunk.files.push(fileName)
  10.       // 01 生成具体的 chunk 内容
  11.       let tempPath = path.posix.join(__dirname, 'temp/main.ejs')
  13.       // 02 读取模块文件中的内容
  14.       let tempCode = this.inputFileSystem.readFileSync(tempPath, 'utf8')
  15.       // 03 获取渲染函数
  16.       let tempRender = ejs.compile(tempCode)
  18.       // 按 ejs 的语法渲染数据
  19.       let source = tempRender({
  20.         entryModuleId: chunk.entryModule.moduleId,
  21.         modules: chunk.modules
  22.       })
  24.       // 输出文件
  25.       this.emitAssets(fileName, source)
  28.     }
  29.   }
  31. emitAssets(fileName, source) {
  32.   this.assets[fileName] = source
  33.   this.files.push(fileName)
  34. }

生成打包文件

Compile.js 实现 emitAssets 方法。

  1. emitAssets(compilation, callback) {
  2.     // 当前要做的核心：创建 dist；执行文件的写入
  4.     // 定义一个工具方法用于执行文件的生成操作
  5.     const emitFiles = (err) => {
  6.       const assets = compilation.assets
  8.       let outputPath = this.options.output.path 
  11.       for (const file in assets) {
  12.         let source = assets[file]
  14.         let targetPath = path.posix.join(outputPath, file)
  16.         this.outputFileSystem.writeFileSync(targetPath, source, 'utf8')
  18.       }
  19.       callback()
  20.     }
  22.     // 创建目录，启动文件写入
  23.     this.hooks.emit.callAsync(compilation, (err) => {
  24.       mkdirp.sync(this.options.output.path)
  25.       emitFiles(err)
  26.     })
  27.   }

Demo

webpack 手写实现