受限于个人的技术水平，该文只简单简述自己对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')
}
