-
Webpack启动流程
-
入口执行文件
平常我们配置webpack指令的时候都会在package.json
如下图: 相当于执行npx webpack
命令,其根本就是找到node_module
文件夹下面的.bin
文件夹中的webpack.js
文件并且执行,所以webpack
打包入口执行文件其实就是/node_module/.bin/webpack.js
-
webpack.js
源码探索-入口函数 -
这里是通过cli
对象isInstalled
函数来确定是否安装webpack-cli
再看isInstalled
函数 -
如果没有安装 webpack-cli的源码执行情况
-
runCli
函数 -
webpack-cli
中的入口文件源码探索 -
WebpackCLI对象源码探索
-
Webpack-cli作用
Webpack-cli的作用其实就是将打包指令后的参数和webpack配置文件中的参数合并成一个配置文件然后调用webpack进行打包,所以像一些脚手架其实就没有安装 webpack-cli,他们都是自己将这些参数合并然后调用webpack
-
-
Webpack源码探索
-
Webpack源码下载以及准备工作
- 第一步:下载源码
- 第二步: 安装依赖,执行
yarn install
或者npm install
- 第三步:写一些简单的代码(使用webpack源码打包使用)
需要注意应为源码中有配置eslint
,所以代码中使用到了es module
,所以这里需要改一下eslint
的一些配置如下图 - 第四步:打包配置文件以及打包执行文件
- 配置文件
应为我们写的一个简单的代码中也就是几行js
不涉及css
等所以配置文件只需要简单的写一个babel-loader
就好具体如下:const path = require("path"); module.exports = { mode: "development", devtool: "source-map", context: path.resolve(__dirname, "."), entry: "./src/main.js", output: { filename: "bundle.js", path: path.resolve(__dirname, "./build") }, module: { rules: [ { test: /\.js$/, use: "babel-loader" } ] }, plugins: [] };
- 打包文件
上文中说到webpack-cli
的源码我们就知道其实最终就是调用了webpack
函数进行打包操作 所以打包文件其实就是可以直接调用源码中的webpack
函数然后将配置作为参数传入即可具体代码如下:const webpack = require("../lib/webpack"); const config = require("./webpack.config"); const compiler = webpack(config); compiler.run((err, stats) => { if (err) { console.error(err); } else { console.log(stats); } });
- 配置文件
-
创建Compiler
webpack
函数源码 先看webpack
函数发现: 发现该函数就是通过createCompiler
的一个函数创建compiler
并返回,所以webpack
打包的第一步就是创建Compiler
createCompiler
函数源码createCompiler
方法的主要功能就是返回一个Compiler
对象并且注入所有插件
需要主要的是::webpack中很多参数都会被转换成插件被注入到整个打包的声明周期中具体可以查看process
源码如下图:
-
Compiler中run方法执行的Hook
上文中说到了插件的执行会在
webpack
打包的某个周期内执行,也说道了很多钩子,此时我们看一下Compiler
对象的构造方法发现,在这里注册了一个hooks
对象也就是上文所说的钩子,然后再这个对象中定了了很多周期,插件的apply
方法中就会监听某一个周期然后开始执行对应的方法,如下图: 而这些钩子的执行就是在run方法的特定时间点执行某一个钩子如下图run方法源码 -
Compiler和Compilation的区别
Compiler
是贯穿整个编译的声明周期的,每次打包都只会创建这一次,Compilation
主要用在compile-make
阶段,只有准备编译某个模块的时候才会被撞见比如准备编译index.js
模块Compilation
主要是和编译内容有关的Compiler
是整个的打包编译,所以当你开启watch
的时候,当某个模块内容出现变化了,此时并不会重新创建Compiler
,应为重新创建Compiler
就意味着需要重新注册插件等操作,所以此时只需要重新创建Compilation
就行,所以当我们修改了webpack
配置文件的时候一定要重新执行开启编译的命令
通过源码我们也可以看出
Compilation
创建的时间点,并且仅仅在compile-make
使用,当编译的方法执行完成之后Compilation
就会被销毁 -
build 入口查找
build
阶段主要是在make
这个钩子出发的时候开始的,在注册所有插件的时候(注册的时候实在createCompiler
方法中上文有提到过),可以发现这里注册了EntryOptionPlugin
插件并且调用apply
方法 接下来再看EntryOptionPlugin
方法的apply
方法的源码 这里监听了entryOption
钩子而entryOption
这个钩子是在EntryOptionPlugin
注册并调用apply
方法之前就被调用的如下图: 所以这里的监听会马上被执行接下来再看applyEntryOption
方法发现这里首先会判断entry
这个字段是否是个函数,不是函数的话在这里判断了多入口的情况如下图: 这里我们只看单个入口的情况,也就是需要看一下EntryPlugin
插件的apply
方法 至此我们终于找到了对make
钩子的监听,发现里面调用的是compilation
这个类的addEntry
方法然后进一步跟踪addEntry
方法的源码 再看buildQueue
这个队列的初始化 有一个参数是processor
对应的是_buildModule
方法 至此也就找到了build
的入口
-