|
| 1 | +# 源码解析1(创建Compiler对象) |
| 2 | +webpack方法运行时，首先会通过createCompiler方法创建Compiler对象,参数`rawOptions`通过命令行或者`webpack.config.js`配置 |
| 3 | +文件传入的原始配置对象 |
| 4 | + |
| 5 | + |
| 6 | + |
| 7 | +## 1.标准化webpack配置 |
| 8 | +`getNormalizedWebpackOptions`方法的作用就是对用户传入的配置标准化成webpack规定的配置，对于用户传入的，就使用用户的，用户没有 |
| 9 | +传入的就用一些初始值替代，比如`undefined`,`[]`,`{}`,最终生成的配置类似于下面这样: |
| 10 | + |
| 11 | + |
| 12 | + |
| 13 | +## 2.对`infrastructureLogging`选项和`context`选项设置默认值 |
| 14 | +`applyWebpackOptionsBaseDefaults`方法的代码如下，对`infrastructureLogging`选项和`context`选项设置 |
| 15 | +::: tip |
| 16 | +其实后面`applyWebpackOptionsDefaults`方法会对所有的options设置默认值， |
| 17 | +这里先对`context`和`infrastructureLogging`选项设置默认值，是因为在后面的 |
| 18 | +初始化`Compiler`和 `NodeEnvironmentPlugin`插件的调用中使用了`context`和`infrastructureLogging` |
| 19 | +::: |
| 20 | +```js |
| 21 | +const applyWebpackOptionsBaseDefaults = options => { |
| 22 | + F(options, "context", () => process.cwd()); |
| 23 | + applyInfrastructureLoggingDefaults(options.infrastructureLogging); |
| 24 | +}; |
| 25 | +``` |
| 26 | +最终`options对象`如下： |
| 27 | + |
| 28 | + |
| 29 | +## 3.创建`Compiler`对象 |
| 30 | +`Compiler`构造函数主要初始化了一些hooks和一些变量，TODO: |
| 31 | + |
| 32 | +## 4.调用`NodeEnvironmentPlugin`内置插件为`Compiler`设置文件系统 |
| 33 | +`NodeEnvironmentPlugin`是webpack的一个内置插件，主要为`Compiler`对象设置文件系统 |
| 34 | +主要包含四部分 |
| 35 | +- inputFileSystem 读文件 |
| 36 | +- outputFileSystem 写文件 |
| 37 | +- intermediateFileSystem TODO: |
| 38 | +- watchFileSystem 对文件变动监控 |
| 39 | + |
| 40 | + |
| 41 | + |
| 42 | +## 5.遍历调用所有配置文件中传入的插件 |
| 43 | + |
| 44 | +用户配置文件的`plugins`可能会传入一些插件，这里集中对插件进行调用 |
| 45 | +webpack插件可以是一个function也可以是一个带有apply方法的类,所以这里进行了一次判断 |
| 46 | +::: code-group |
| 47 | +```js [function插件] |
| 48 | +function myPlugin(compiler) { |
| 49 | + //do something |
| 50 | +} |
| 51 | +``` |
| 52 | +```js [class插件] |
| 53 | +class MyPlugin{ |
| 54 | + apply(compiler) { |
| 55 | + //do something |
| 56 | + } |
| 57 | +} |
| 58 | +``` |
| 59 | +::: |
| 60 | +## 6.设置其他默认选项 |
| 61 | +`applyWebpackOptionsDefaults`方法为选项对象设置默认值，最终的结果如下 |
| 62 | + |
| 63 | + |
| 64 | + |
| 65 | +## 7.`environment`和`afterEnvironment`钩子函数调用 |
| 66 | +代码如下： |
| 67 | +```js |
| 68 | +compiler.hooks.environment.call(); |
| 69 | +compiler.hooks.afterEnvironment.call(); |
| 70 | +``` |
| 71 | +两个钩子函数接连调用，主要是在编译器准备环境时调用， |
| 72 | +时机就在配置文件中初始化插件之后。 |
| 73 | +::: tip |
| 74 | +比如 webpack内置插件`WatchIgnorePlugin`就注册了`afterEnvironment`钩子函数,在环境准备完成后 |
| 75 | +改变`compiler`对象的`watchFileSystem`属性 |
| 76 | +```js{16} |
| 77 | +class WatchIgnorePlugin { |
| 78 | + /** |
| 79 | + * @param {WatchIgnorePluginOptions} options options |
| 80 | + */ |
| 81 | + constructor(options) { |
| 82 | + validate(options); |
| 83 | + this.paths = options.paths; |
| 84 | + } |
| 85 | +
|
| 86 | + /** |
| 87 | + * Apply the plugin |
| 88 | + * @param {Compiler} compiler the compiler instance |
| 89 | + * @returns {void} |
| 90 | + */ |
| 91 | + apply(compiler) { |
| 92 | + compiler.hooks.afterEnvironment.tap("WatchIgnorePlugin", () => { |
| 93 | + compiler.watchFileSystem = new IgnoringWatchFileSystem( |
| 94 | + compiler.watchFileSystem, |
| 95 | + this.paths |
| 96 | + ); |
| 97 | + }); |
| 98 | + } |
| 99 | +} |
| 100 | +``` |
| 101 | +::: |
| 102 | +## 8.WebpackOptionsApply 调用 |
| 103 | +`WebpackOptionsApply`的`process`方法根据不同的options选项初始化了webpack内置的插件 |
| 104 | +并且执行了三个钩子函数 |
| 105 | +1. entryOption,在 webpack 选项中的 entry 被处理过之后调用。 |
| 106 | +```js |
| 107 | +new EntryOptionPlugin().apply(compiler); |
| 108 | +compiler.hooks.entryOption.call(options.context, options.entry); |
| 109 | +``` |
| 110 | +::: tip |
| 111 | +`EntryOptionPlugin` 和 `DllPlugin`插件注册了entryOption钩子函数 |
| 112 | +::: |
| 113 | + - EntryOptionPlugin 代码如下 |
| 114 | + ```js {14-20} |
| 115 | + class EntryOptionPlugin { |
| 116 | + apply(compiler) { |
| 117 | + compiler.hooks.entryOption.tap("EntryOptionPlugin", (context, entry) => { |
| 118 | + EntryOptionPlugin.applyEntryOption(compiler, context, entry); |
| 119 | + return true; |
| 120 | + }); |
| 121 | + } |
| 122 | + static applyEntryOption(compiler, context, entry) { |
| 123 | + if (typeof entry === "function") { |
| 124 | + const DynamicEntryPlugin = require("./DynamicEntryPlugin"); |
| 125 | + new DynamicEntryPlugin(context, entry).apply(compiler); |
| 126 | + } else { |
| 127 | + const EntryPlugin = require("./EntryPlugin"); |
| 128 | + for (const name of Object.keys(entry)) { |
| 129 | + const desc = entry[name]; |
| 130 | + const options = EntryOptionPlugin.entryDescriptionToOptions( |
| 131 | + compiler, |
| 132 | + name, |
| 133 | + desc |
| 134 | + ); |
| 135 | + for (const entry of desc.import) { |
| 136 | + new EntryPlugin(context, entry, options).apply(compiler); |
| 137 | + } |
| 138 | + } |
| 139 | + } |
| 140 | + } |
| 141 | +} |
| 142 | + ``` |
| 143 | + 首先在apply方法中注册一个entryOption钩子函数，entryOption钩子函数被调用时 |
| 144 | + 首先对entry对象做一个标准化，生成的options如下 |
| 145 | + |
| 146 | + |
| 147 | + |
| 148 | +然后调用了EntryPlugin的apply方法，如下 |
| 149 | +```js |
| 150 | +class EntryPlugin { |
| 151 | + constructor(context, entry, options) { |
| 152 | + this.context = context; |
| 153 | + this.entry = entry; |
| 154 | + this.options = options || ""; |
| 155 | + } |
| 156 | + |
| 157 | + apply(compiler) { |
| 158 | + //注册compilation钩子函数 |
| 159 | + compiler.hooks.compilation.tap( |
| 160 | + "EntryPlugin", |
| 161 | + (compilation, { normalModuleFactory }) => { |
| 162 | + compilation.dependencyFactories.set( |
| 163 | + EntryDependency, |
| 164 | + normalModuleFactory |
| 165 | + ); |
| 166 | + } |
| 167 | + ); |
| 168 | + |
| 169 | + const { entry, options, context } = this; |
| 170 | + const dep = EntryPlugin.createDependency(entry, options); |
| 171 | + //注册make钩子函数 |
| 172 | + compiler.hooks.make.tapAsync("EntryPlugin", (compilation, callback) => { |
| 173 | + compilation.addEntry(context, dep, options, err => { |
| 174 | + callback(err); |
| 175 | + }); |
| 176 | + }); |
| 177 | + } |
| 178 | + |
| 179 | + static createDependency(entry, options) { |
| 180 | + const dep = new EntryDependency(entry); |
| 181 | + dep.loc = { name: typeof options === "object" ? options.name : options }; |
| 182 | + return dep; |
| 183 | + } |
| 184 | +} |
| 185 | +``` |
| 186 | +首先注册了compilation钩子函数，然后生成entry依赖，最后注册make钩子 |
| 187 | + |
| 188 | +2. afterPlugins 在初始化内部插件集合完成设置之后调用。 |
| 189 | +```js |
| 190 | +compiler.hooks.afterPlugins.call(compiler); |
| 191 | +``` |
| 192 | +::: tip |
| 193 | +`ModuleFederationPlugin`插件注册了afterPlugins钩子函数 |
| 194 | +::: |
| 195 | +3. afterResolvers resolver 设置完成之后触发。 |
| 196 | +```js |
| 197 | +compiler.hooks.afterResolvers.call(compiler); |
| 198 | +``` |
| 199 | + |
| 200 | + |
| 201 | +## 9.`initialize`钩子函数调用 |
| 202 | +当编译器对象被初始化时调用。 |
| 203 | +```js |
| 204 | +compiler.hooks.initialize.call(); |
| 205 | +``` |
| 206 | + |
| 207 | +这样就完成了Compiler对象的创建 |
0 commit comments