### 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