首页
学习
活动
专区
工具
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.2K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    这是前端领域的转译打包工具链的第二篇文章,上篇文章讲了前端领域的各种转译器,包括 babel、tsc、terser、eslint、postcss、posthtml、swc 等,介绍了他们各自的用途和通用的原理...webpack 是通过模块之间依赖关系的分析来构建依赖图,通过不同的后缀对应的 loader 来对不同内容做转换,所以支持 css、js、png 等各种模块。 ?...解释器和转译器的区别 转译器是把源码 parse 成 AST 之后,进行 AST 转换,之后再打印成目标代码,并生成 sourcemap。 ?...跨端引擎是为了让前端代码渲染到原生,实现了一套 css 渲染引擎和 dom api,提供了前端代码运行的容器,可以对接各种前端框架。 ?...我们总结下这两节的内容: 因为前端 html、css、js 直接从源码解释的特点,所以需要转译器,不同转译器(babel、tsc、terser、eslint、postcss、posthtml、swc)目的不同

    77710

    SassSCSS 简明入门教程

    ❞ Sass(Syntactically Awesome StyleSheets) 是 CSS 的一种扩展,是 CSS的 超集(通过编译生成浏览器可以处理传统 CSS)。...SASS 初体验 在开始介绍 SASS 特性之前先来学习如何将 Sass 转译CSS。...: sass main.scss main.css 这时你就会看到文件夹中多了 main.css 和 main.css.map 两个文件,前者是转译过后的 CSS 文件,大部分是方便使用浏览器调试工具在进行调试时连结原文件和转译文件...CSS,例如跨浏览器的前缀,使用 @include 加入群组: 转译前: @mixin backface-visibility { backface-visibility: hidden;...除了 Sass 外上还有很多 CSS 的变形,包括语法比较容易学的 [LESS](http:/ /lesscss.org/#)、具有组件化思想的 CSS in JS,主要解决全局问题和模块引用的 CSS

    2.7K20

    新一代前端构建工具汇总

    支持内联 Bundle,即可以以文本或者其他格式引入转译后的资源,例如上面提到的以文本格式引入编译后的 CSS 文件,亦可以直接以 dataURL 的格式引入二进制文件等。...在 JS 和 CSS转译上使用了 Rust ,效率上会有所提升。...Transform 支持转译的内容类型有:JS、JSX、TS、TSX、JSON、CSS、二进制、Text、Base64,不同类型的内容需要使用不同的 loader (这里指 esbuild 内置的 loader...支持指定 Target:转译成 js 或 css 时可指定目标语法版本,默认 esnext,即使用最新的特性。 支持 Tree shaking:主要针对 declaration-level。...能力一览 支持转译 JavaScript、TypeScript、J(T)SX、值得注意的是,它还支持转译 React 17 版本的新 JSX,也能支持「转译到 ES5 语法」。

    1K30

    前端构建系统浅析

    框架和工具也可能引入转译步骤。例如,JSX语法必须转译为JavaScript。如果一个库提供了Babel插件,这通常意味着它需要一个转译步骤。...目前常用的转译器有Babel、SWC和TypeScript Compiler。 Babel(2014)是标准的转译器:一个用JavaScript编写的单线程转译器,速度较慢。...静态资源 静态资源,如CSS、图片和字体,通常在打包步骤中被添加到可分发文件中。它们也可能在压缩步骤中被优化文件大小。...常用的CSS压缩工具有cssnano、csso和Lightning CSS。cssnano和csso是纯CSS压缩工具,用JavaScript编写,因此速度较慢。...Lightning CSS则是用Rust编写的,声称速度比cssnano快100倍。此外,Lightning CSS还支持CSS转换和打包功能。 开发工具 基本的前端构建管道可以生成优化的生产发布版。

    12010
    领券