webapck笔记（ 七 ）- 编译过程

最新推荐文章于 2024-06-04 09:23:22 发布
最新推荐文章于 2024-06-04 09:23:22 发布
阅读量323 收藏
点赞数
分类专栏： Webpack 文章标签： webpack webpack编译原理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44238796/article/details/107878828
版权
本文详细介绍了webpack的编译过程，包括初始化、创建chunk、构建依赖、生成chunk assets、合并chunk assets和输出。通过实例解释了chunk的概念，以及如何从模块依赖到生成资源清单的转换。同时，文章还涵盖了chunk hash的生成和webpack官方术语的解释。
摘要由CSDN通过智能技术生成

目录:

  1. 初始化
  2. 编译
    • 创建chunk
    • 构建依赖
    • 生成chunk assets
    • 合并chunk assets
  3. 输出
  4. 总结
    • webpack官方术语

啥叫编译？ 有数不, webapack将我们书写的代码转换为最终使用的代码的这个过程就叫做编译, 如下图红框中的流程就叫做编译过程

在这里插入图片描述

初始化

此阶段, webpack会将cli参数, 配置文件, 默认配置进行融合, 形成一个最终的配置对象（ 有点像Css的融合过程, 也有点像Object.assign ）

在这里插入图片描述

对配置的处理过程是依托于一个叫做yargs的库完成的

此阶段相对来说比较简单, 主要是为接下来的编译做准备

目前, 你可以简单的以为, 初始化阶段主要用于产生一个最终的配置

编译

创建chunk

chunk是webpack在内部构建过程中的一个概念, 你可以理解为块, 他表示通过某个入口找到的所有依赖的统称

我给你来举个例子, 根据入口模块

最低0.47元/天 解锁文章
_付宏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
新建一个vue项目过程中遇到的问题
CDD是我呀
08-09 2万+
/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run dev --scripts-prepend-node-path=auto > mytodolists@1.0.0 dev /Users/chenqiurui/WebstormProjects/myVue > webpack-dev-server...
ngular npm run build 报错 FATAL ERROR: Ineffective mark-compacts
普罗米绣丝的博客
11-17 1009
angular npm run build 报错 FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 今天在打包时发现此错误（angular7） 90% chunk assets processing <--- Last few GCs ---> [5040:000001
服务器webpack构建性能,缓慢的webpack构建时间（高级模块优化）
weixin_39601641的博客
08-12 1196
我们很难尝试迁移到我们的项目，该项目基于requirejs。缓慢的webpack构建时间(高级模块优化)经过几个星期的努力，我们用webpack复制了我们当前的项目状态后，我们遇到了性能问题。我们正在使用webpack版本2.3.3。目前我们有240个模块和58个块。我们的问题是，当我们在手表推出的WebPack模式开发(或使用的WebPack-dev的服务器)，每次我们修改一个文件，我们不得不等...
Webpack
最新发布
CSDN20221005的博客
06-04 2124
内容分发网络, 就是一组分布在各个地区的服务器. 把静态资源文件/第三方库放在CDN网络中的各个服务器中, 供用户就近请求获取, 减轻自己服务器请求压力, 就近请求物理延迟低, 配套缓存策略。css代码提取后没有被压缩, 通过css-minimizer-webpack-pligin插件, 压缩自己的css文件。webpack5内置资源模块(字体,图片等)打包模块, 无需额外的loader, 只需要一些配置即可。静态模块: 编写代码过程中的, html, css, js, 图片等固定内容的文件。
vue项目运行报错：94% asset optimization ERROR Failed to compile with 2 errors13:03:01 error in ./src/ba
wise18146705004的博客
04-23 6935
使用vue编写的前端项目运行报错： 88% hashing 89% module assets processing 90% chunk assets processing 94% asset optimization ERROR Failed to compile with 2 errors13:03:01 error in ./src/base/components/head...
vue 系列问题-01
weixin_41691261的博客
05-17 1178
VUE This relative module was not found: install.js 报错如何处理 ERROR Failed to compile with 1 error下午10:34:38 <s> [webpack.Progress] 90% additional chunk assets processing HotModuleReplacementPlugin <s> [webpack.Progress] 91% recording <s> [
webpack-编译过程分析
张印的博客
02-18 937
webpack 编译过程 {ignore} webpack 的作用是将源代码编译（构建、打包）成最终代码 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KOylt0bl-1582009061629)(assets/2020-01-09-10-26-15.png)] 整个过程大致分为三个步骤 初始化 编译 输出 ## 初始化 此阶段，webpack会将CLI参数、...
编译原理笔记-文法和语言部分
04-28
编译原理笔记，文法和语言部分，使用教材为编译原理（第三版）王生原、董渊、张素琴等编著的教材，后续持续更新。
编译原理笔记-hust-cse.pdf
03-17
编译原理笔记华中科技大学网安专业 根据教程和PPT整理手写资源
C语言-编译预处理_笔记
04-16
C语言作为一种广泛使用的编程语言，在编写过程中经常需要利用到编译预处理功能。编译预处理是C语言的一个重要组成部分，它允许程序员在正式编译之前对源代码进行一系列预处理操作，包括宏定义、文件包含以及条件编译...
编译原理-课堂笔记01-20.02.17
01-06
本节重点：五个步骤七个部分 主要有五个步骤和另外两个贯穿全过程的部分。一共七部分 1 词法分析 将源码识别为一个一个的词语 单词分类：四大类或五大类 关键字-保留字 while、if等 分界符 运算符 标识符 常量 输出...
ccnp学习笔记---stp
02-16
ccnp学习笔记---stp
webpack详解
热门推荐
qq_43743402的博客
03-24 6万+
一、什么是webpack 1、官方解释：从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具。（从两点概括这句话即模块和打包） 下面来说一下模块和打包的概念！ 2、前端模块化： 前端模块化的一些方案：AMD、CMD、CommonJS、ES6（浏览器不能识别它们，但是webpack可以做它们的底层支撑，方可进行模块化开发） ES6之前，要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发 并且在通过模块化开发完成了项目后，还需要处理模块化间的各种依赖，并且将
webpack编译过程
xun__xing的博客
08-22 933
编译过程一、编译过程1.初始化2.编译3.输出4.总过程 一、编译过程 webpack 的作用是将源代码编译（构建、打包）成最终代码 整个过程大致分为三个步骤 初始化 编译 输出 1.初始化 此阶段，webpack会将CLI参数、配置文件、默认配置进行融合，形成一个最终的配置对象。 例： 以及终端命令，整理成最终配置对象 对配置的处理过程是依托一个第三方库yargs完成的 此阶段相对比较简单，主要是为接下来的编译阶段做必要的准备 目前，可以简单的理解为，初始化阶段主要用于产生一个最终的配置 2.
webpack看这一篇就够了
一个前端开发者
06-20 5万+
能够理解webpack基本概念和作用能够掌握webpack使用步骤能够使用webpack相关配置能够使用webpack开发服务器能够查阅使用webpack中文文档webpack官网现代 javascript 应用程序的 静态模块打包器 (module bundler)为要学的 vue-cli 开发环境做铺垫把很多文件打包整合到一起, 缩小项目体积, 提高加载速度其中功能:less/sass -> cssES6/7/8 -> ES5 处理js兼容支持js模块化处理css兼容性html/css/js -> 压缩
什么是Webpack？（详细介绍）
HanXiaoXi_yeal的博客
01-07 1万+
Webpack​ webpack主要是打包，所以其核心存在两个部分，入口和出口，你可以把webpack加工想象成香肠加工厂，就是活猪进去，香肠出来的那种，但是如果每次加工都需要员工亲力亲为，那多麻烦那，所以我们考虑到了自动化配置。webpack存在功能类似的配置文件，让webpack通过配置，全自动的执行我们需要的编译操作。 ​ ​webpack分成四个部分，期中最核心的就是入口和出口，当然在入口和出口配置的同时我们还需要一些加载器和插件，这就是我们所谓的webpack配置文件。这个配置文件我们习惯把其命
Webpack详解
李宥的博客
07-05 6631
- 静态模块打包工具 - 官网：[https://webpack.docschina.org/](https://webpack.docschina.org/) - 官网文档：https://webpack.docschina.org/concepts/
哈工大计算机科学学院《编译原理》课程笔记-代码生成
"该资源是哈尔滨工业大学计算机科学与技术学院的一份关于编译原理的课件，重点关注代码生成器的设计，特别是寄存器的分配和指派问题。这份资料由姜守旭博士/教授主讲，课程内容涵盖理论与实践，旨在让学生深入理解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值