[JavaScript知识库]剖析webpack打包

1.webpack基本打包原理

?????????1.1什么是webpack?
??????????????????webpack 是一个 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle,可以将所有的js、css、图片等都可以打包成一个文件。从而生成最终文件。
??????????????????webpack 就像一条生产线,需要经过一系列处理流程后才能将源文件转换成最后的文件。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。 插件就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做处理。

2.webpack构建流程

?????????1.初始化参数：从配置文件和 Shell 语句中读取与合并参数,得到最终的参数。
?????????2.开始编译：用上一步最终得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译。
?????????3.确定入口：根据配置中的 entry 找出所有的入口文件，由这些入口文件开始进行打包。
?????????4.编译模块：从入口文件出发,调用所有配置的 Loader 以及其它的配置对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。
?????????5.完成模块编译：在经过第 4 步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系。
?????????6.输出资源：根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会。
?????????7.输出完成：在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统，生成相对应的出口文件。

3.webpack核心功能

?????????3.1 在webpack内，可以通过相应的工具，来帮助我们分析内部的语法,包括 es6,这时候会返回一个 AST 抽象语法树，示例代码如下：

const path = require('path')
module.exports = {  
	entry: './src/index.js',  
	output: {    
		path: path.resolve(__dirname, './dist'),    
		filename: 'main.js'  
	}
}


const fs = require('fs')
const parser = require('@babel/parser')
const options = require('./webpack.config')
const Parser = {  
	getAst: path => {    
		// 读取入口文件    
		const content = fs.readFileSync(path, 'utf-8')    
		// 将文件内容转为AST抽象语法树    
		return parser.parse(content, {      
		sourceType: 'module'    
		})  
	}
}

?????????3.2 在这个过程中，也叫做获取依赖图(dependency graph)的过程，这个过程就是从入口模块开始，对每个模块以及模块的依赖模块都调用getModuleInfo方法就行分析，最终返回一个包含所有模块信息的对象。

const parseModules = file => {
    // 定义依赖图
    const depsGraph = {}
    // 首先获取入口的信息
    const entry = getModuleInfo(file)
    const temp = [entry]
    for (let i = 0; i < temp.length; i++) {
        const item = temp[i]
        const deps = item.deps
        if (deps) {
            // 遍历模块的依赖，递归获取模块信息
            for (const key in deps) {
                if (deps.hasOwnProperty(key)) {
                    temp.push(getModuleInfo(deps[key]))
                }
            }
        }
    }
    temp.forEach(moduleInfo => {
        depsGraph[moduleInfo.file] = {
            deps: moduleInfo.deps,
            code: moduleInfo.code
        }
    })
    console.log(depsGraph)
    return depsGraph
}
parseModules('./src/index.js')