首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

Webpack 原理系列八:产物转译打包逻辑

之前的所有前置操作 「模块转译」:遍历 modules 数组,完成所有模块的转译操作,并将结果存储到 compilation.codeGenerationResults 对象 「模块合并打包」:在特定上下文框架下...可以看到,Webpack 先将 modules 逐一转译为模块产物 —— 「模块转译」,再将模块产物拼接成 bundle —— 「模块合并打包」,我们下面会按照这个逻辑分开讨论这两个过程的原理。...main.js 文件所示,包含三块内容,从上到下分别为: name.js 模块对应的转译产物,函数形态 Webpack 按需注入的运行时代码 index.js 模块对应的转译产物,IIFE(立即执行函数...,我们先回到这个流程图: 流程图中,compilation.codeGeneration 函数执行完毕 —— 也就是模块转译阶段完成后,模块的转译结果会一一保存到 compilation.codeGenerationResults...一个极度简化的 CMD 实现:__webpack_require__ 函数 最后,一个包裹了 entry 代码的 IIFE 函数 「模块转译」 是将 module 转译为可以在宿主环境如浏览器上运行的代码形式

1.1K10

【华为分享】前端领域的转译打包工具链(下)

这是前端领域的转译打包工具链的第二篇文章,上篇文章讲了前端领域的各种转译器,包括 babel、tsc、terser、eslint、postcss、posthtml、swc 等,介绍了他们各自的用途和通用的原理...它们通过匹配文件路径的方式来对不同文件应用不同的转译器。 比如 gulp: ? 和 fis: ?...解释器和转译器的区别 转译器是把源码 parse 成 AST 之后,进行 AST 转换,之后再打印成目标代码,并生成 sourcemap。 ?...我们总结下这两节的内容: 因为前端 html、css、js 直接从源码解释的特点,所以需要转译器,不同转译器(babel、tsc、terser、eslint、postcss、posthtml、swc)目的不同...转译器用在项目里需要配合打包工具,或者通过 ide 插件、git hooks 的方式使用。 转译器大多是对单个文件进行处理,打包工具用于整个项目的处理。

71410
领券