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

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

    之前的所有前置操作 「模块转译」:遍历 modules 数组,完成所有模块的转译操作,并将结果存储到 compilation.codeGenerationResults 对象 「模块合并打包」:在特定上下文框架下...可以看到,Webpack 先将 modules 逐一转译为模块产物 —— 「模块转译」,再将模块产物拼接成 bundle —— 「模块合并打包」,我们下面会按照这个逻辑分开讨论这两个过程的原理。...一、模块转译原理 1.1 简介 先回顾一下 Webpack 产物: 上述示例由 index.js / name.js 两个业务文件组成,对应的 Webpack 配置如上图左下角所示;Webpack 构建产物如右边...main.js 文件所示,包含三块内容,从上到下分别为: name.js 模块对应的转译产物,函数形态 Webpack 按需注入的运行时代码 index.js 模块对应的转译产物,IIFE(立即执行函数...) 形态 其中,运行时代码的作用与生成逻辑在上篇文章 Webpack 原理系列六:彻底理解 Webpack 运行时 已有详尽介绍;另外两块分别为 name.js 、index.js 构建后的产物,可以看到产物与源码语义

    1.2K10
    领券