站长

<h2 id="heading-0">day-03-webpack Compiler 类</h2><ul><li><code>Compiler</code> 类用于实例化一个 <code>compiler</code> 实例<ul><li>该类中主要掌控整个打包流程，开始打包 ==&gt; 实例划 <code>Compilation</code>进行打包 ===&gt; <code>emitAssets</code>打包结果输出</li><li><code>webpack</code> 为了保证很好的扩展性，在实现时通过<code>tapable</code>工具库定义了大量的钩子，而在整个项目打包编译过程中，会在指定打包节点调用特定类型的钩子，从而全过程的可控。</li><li>定义一些方法提供给 compile 钩子函数使用如：<code>getCache、getInfrastructureLogger</code></li></ul></li><li>关键方法<ul><li><code>run</code>: 启动打包流程<ol><li><code>beforeRun</code> 钩子调用</li><li><code>run</code>钩子调用</li><li><code>records</code>获取</li><li><code>compile</code>调用，开始打包流程</li><li><code>onCompiled</code>方法调用,打包结果输出</li></ol><ul><li><img src="https://img.blogweb.cn/article/7691847c0a4b444db643af53dcfa8480.webp" loading="lazy" alt="每天读一点webpack-003"></li></ul></li><li><code>compile</code>: 启动编译<ol><li><code>beforeCompile</code> 钩子调用</li><li><code>compile</code> 钩子调用</li><li><code>newCompilation</code> 获取 <code>compilation</code></li><li><code>make</code>钩子调用</li><li><code>finishMake</code>钩子调用</li><li><code>compilation.finish</code> 调用，结束编译</li><li><code>compilation.seal</code> 调用，打包编译结果</li><li><code>afterComple</code> 钩子调用</li></ol><ul><li><img src="https://img.blogweb.cn/article/68fd14541c8943efbba61b1c72c54c3e.webp" loading="lazy" alt="每天读一点webpack-003"></li></ul></li><li><code>newCompilation</code>： 用于获取 <code>compilation</code>实例</li><li><code>onCompiled</code>: 调用 <code>emitAssets</code> 进行打包结果输出<ul><li><img src="https://img.blogweb.cn/article/ec24c400e3264c9e910135fbef0d14e5.webp" loading="lazy" alt="每天读一点webpack-003"></li></ul></li></ul></li><li>抛开以上所列出功能中的钩子函数调用，<code>webpack</code>的<code>Compiler</code> 类的功能流程比较简单：run ==&gt; compile ==&gt; compilation ==&gt; compilation.finish ==&gt; compilation.seal ==&gt; emitAssets</li></ul>