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')
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')
|