### webpack:

\1. 如何配置把js、css、html单独打包成一个文件

https://juejin.cn/post/6972378623281987621

step1: 实例化compiler

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

step2: compiler.run

  this.hooks.beforeRun.callAsync -> this.hooks.run.callAsync ->  this.compile
    this.compile 接收 onCompiled
    onCompiled 内容是: 最终在这里将处理好的 chunk 写入到指定的文件然后输出至 dist (文件输出路径,不一定是dist)

step3: compile方法做的事情
  newCompilationParams,实例化Compilation对象之前先初始化其所需参数
  调用this.hooks.beforeRun.callAsync
    this.newCompilation(params) 实例化Compilation对象
    this.hooks.make.callAsync  触发make钩子监听
    compilation.seal 开始处理 chunk
    this.hooks.afterCompile.callAsync(compilation,...)
    流程进入compilation了。。。

step4: 完成模块编译操作

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

\2. loader执行顺序,从下而上,从右而左

\3. plugin

Compression-webpack-plugin

Terse-webpack-plugin

Theme-color-replace

webpack 原理

babel 原理

虚拟 DOM 的理解

项目里如何做的性能优化

写过webpack loader 或者插件吗

讲讲你写的 babel 插件 作者:焖豆不闷 https://www.bilibili.com/read/cv11635943/ 出处:bilibili