webpack工作流

受限于个人的技术水平，该文只简单简述自己对webpack工作流的理解，如有不对的地方，请各位大佬指导。
开始我的菜鸡式努力(以下内容，纯属自己一本正经的胡说八道，仅限参考)

webpack工作流程

• 1.获取webpack.config.js参数，和shell脚本上的参数
• 2.开始编译，将获取的参数初始化Compiler对象
• 3.加载所有配置的插件
• 4.执行对象的run方法开始编译
• 5.从入口文件出发，调用所有配置的loader对模块进行编译，再找出该模块依赖的模块，在递归此步骤，直到所有入口文件的依赖文件都经过loader处理
• 6.模块收集，根据配置生成单个或者多个chunk
• 7.再把每个chunk生成单个的文件，加入到输出列表
• 8.文件输出
• 9.利用webpack的广播机制，插件会监听到自己的事件后执行回调

插件的执行时机

利用webpack的广播机制，插件会监听到自己的事件后执行回调

插件是如何实现注册和调用？

通过tapable进行事件的注册、调用
有兴趣还可以了解一下before-after-hook

// npm install --save tapable
const { SyncHook } = require("tapable")
const hook = new SyncHook()
 // 注册
 hook.tap('something', () => {
   console.log('lm0428')
 })
 // 调用
 hook.call('something')

步骤解析

• 获取参数

// 拿到配置参数
let options = require('./webpack.config.js')
// 拿到shell参数  shell配置参数  --key1 value1 --key2 value2
var minimist = require('minimist');
var args = minimist(process.argv.slice(2));
// 参数进行合并
options = {...options, ...args}

• 初始化Compiler对象

class Compiler {
  constructor (options) {
      this.options = options
      // 插件钩子集合，用于在webpack广播时，触发相应的处理
      this.hooks = {}
  }
  run () {
    // 模块解析，下文详细说明
  }
}
const compiler = new Compiler(options)

• 加载所有配置的插件，并执行插件上的初始化(apply)方法，将插件的事件注册

// plugin.js
const { SyncHook } = require("tapable")
module.exports = class somePlugin {
  apply (compiler) {
    // 在compiler实例上注册插件的回调，[name:String] 名称自定义
    compiler.hooks[name] = new SyncHook()
    compiler.hooks[name].tap('name1', () => {
      console.log('name1')
    })
    compiler.hooks[name].tap('name2', () => {
      console.log('name2')
    })
    .... // 可以注册多个
  }
}

if (options.plugins && Array.isArray(options.plugins)) {
  options.plugins.forEach(plugin => {
    plugin.apply(compiler)
  })
}

• 执行对象的run方法开始编译

compiler.run()

• 编译步骤

// loader解析  因为webpack只识别js文件资源，所以loader就是讲其他资源转化为webpack可以识别的js资源
const loader = source => '可以识别的js资源'
// 例如babel-loader  将高阶语法转化为低阶语法
const source = 'const sum = (a, b) => a + b'
const babelLoader = source => 'function sum () => { return a + b}'
babelLoader(source)

run () {
    // 找到入口文件
    let entry = path.join(this.options.context ? this.options.context: __dirname, this.options.entry)
    // 从入口文件出发，调用所有配置的loader对模块进行编译，再找出该模块依赖的模块，在递归此步骤，直到所有入口文件的依赖文件都经过loader处理
    // 1.读取模块
    let entryContent = fs.readFileSync(entry, 'utf8')
    // 2.调用loader编译 
    let entrySource = babelLoader(entryContent)
    // console.log(entry, entryContent)
    // 3.模块收集
    // module集合 
    let modules = [] 
    let entryModule = {
      id: entry,
      source: entrySource
    }
    modules.push(entryModule)
    // 4.根据入口和模块之间的关系，组装成一个包含多个模块的chunk
    const entryPath = entry.split('/')
    let chunk = {
      name: entryPath[entryPath.length - 1], // 输入文件名称
      modules  // 单个chunk下的模块集合
    }
    // 5.chunks收集  多chunk例如路由懒加载 创建单独的chunk，当加载时，在主入口文件中调用方法动态生成script标签。
    let chunks = []
    chunks.push(chunk)
    // 6.再把每个chunk生成单个的文件夹，加入到输出列表
    let file = {
      fileName: this.options.output.filename,
      source: chunks.find(chunk => chunk.name === entryPath[entryPath.length - 1]).modules.reduce((pre, next) => {
        return pre + next.source
      }, '')
    }
    // 7.输出文件内容
    const filePath = path.join(this.options.output.path,file.fileName)
    // 判断是否有输出文件夹
    const dirLists = fs.readdirSync(__dirname)
    if (!dirLists.find(item => path.resolve(__dirname, item) === this.options.output.path)) {
      // 没有出口文件夹，创建文件夹
      fs.mkdirSync(this.options.output.path)
    }
    fs.writeFileSync(filePath, file.source, 'utf-8')
    // 8.触发插件钩子函数  利用webpack的广播机制，插件会监听到自己的事件后执行回调
    this.hooks[name].call('name1')
}