前面几个章节我们分别去探索了webpack
的loader
机制、plugin
机制、devServer
、sourceMap
、HMR
,但是你是否知道这些配置项是怎么去跟webpack本身执行机制挂钩的呢?这一章我们就来探索一下webpack的运行机制与工作原理吧。
webpack核心工作过程
我们打开webpack官网,我们可以看到这样的一张图。
上图陈述了任意资源文件模块,经过webpack
处理会生成相对应的资源文件,在这里你可能会问,webpack
输出不是只有.js
文件吗,为什么会有.css
、.jpg
呢,各位同学不要着急,请听我慢慢向你道来。
画图解释
构建成了依赖树之后,webpack
会递归遍历当前的依赖树,使用我们在配置中写的loader
进行对应的模块加载,加载完毕之后会进行output
的配置选项进行文件输出,一般我们默认的是dist/main.js
为输出文件。我们也称之为bundle.js
。
至此我们就完成了整个项目的打包过程。
webpack是怎么去处理那些不能被js处理的文件的呢
对于依赖模块中,那些无法被js
解释描述的模块,比如图片,字体等等,那么会有对应的loader
,比如file-loader
,会把这些资源直接输出到打包目录,然后会把当前资源的访问路径
作为模块的导出成员暴露
出来,以供外部成员调用。
plugin是怎么工作的呢
plugin
在webpack
打包的任意阶段中,可以通过hooks
往阶段中去注入某些功能,去完成某些构建任务。
webpack核心工作的原理
上面也提到webpack
打包的核心流程,我们在package.json
里面配置了"build": webpack && webpack-cli
,之后只需要在terminal
中键入npm run build
就可以让webpack
自动打包构建了,然后webpack
会经历如下步骤。
webpack-cli
启动。- 载入配置项参数,初始化
Compiler
对象,加载所有配置项plugin
。 - 使用
Compiler
对象的run
方法开始编译项目。 - 通过
entry
找到入口文件,解析模块依赖,形成依赖树。 - 递归遍历依赖树,让
loader
去加载对应的模块以及依赖模块。 - 合并
loader
处理结果,组装成chunks
,转换成文件,输出到build
目录。
如果你看文字比较烦闷,那么我也可以画成概念图:
深入webpack的源码
那么webpack5
是怎么进行构建的呢,我们还是得来深入一下源码,我们在webpack-cli
文件夹下的bin
目录找到入口文件。
// webpack/node_modules/webpack-cli/bin/cli.js
#!/usr/bin/env node
"use strict";
const importLocal = require("import-local");
const runCLI = require("../lib/bootstrap");
...
process.title = "webpack";
// 执行runCLI函数
// process.argv = [
//'/usr/local/bin/node',
//'/Users/mac/Desktop/webpack/webpack/node_modules/.bin/webpack-cli'
//]
runCLI(process.argv);
// webpack/node_modules/webpack-cli/lib/bootstrap.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// 导入WebpackCLI
const WebpackCLI = require("./webpack-cli");
const runCLI = async (args) => {//创建一个webpack-cli实例const cli = new WebpackCLI();try {await cli.run(args);}catch (error) {cli.logger.error(error);process.exit(2);}
};
module.exports = runCLI;
上述代码表明webpack
在工作的时候创建了一个WebpackCli
的实例,之后去调用类的run
方法执行流程,我们这里先大致看一下WebpackCli
的实现。
run方法的执行
run
方法里面去加载了构建配置项、版本配置项、监听配置项、帮助配置项等,代码足足有500
多行,我们只关注于核心代码。
...
run(args, parseOptions){ // args为process.argv // parseOptions为装填的解析配置项 ... const loadCommandByName = async (commandName, allowToInstall = false) => { ... if (isBuildCommandUsed || isWatchCommandUsed) { console.log(options, 'options') // options : {} // 这里执行runWebpack await this.runWebpack(options, isWatchCommandUsed); console.log(options, 'options') // options : { argv: { env: { WEBPACK_BUNDLE: true, WEBPACK_BUILD: true } } } } ... }; ...
}
// runWebpack
runWebpack(options, isWatchCommand){ // options : {} // isWatchCommand : false ...console.log(options, isWatchCommand, '配置5') // { argv: { env: { WEBPACK_BUNDLE: true, WEBPACK_BUILD: true } } } falsecomp