对webpack的理解

作用

是一个前端代码打包工具。

打包流程

主要是: 初始化参数,编译,找到入口entry,遍历模块以及它依赖的模块,预处理loader,模块编译,然后根据依赖关系输出到指定的路径和目录下。

模块

loader: 预处理器,对各种文件格式进行处理,转换成webpack能识别的js代码。常见的预处理器有less-loader、postcss-loader、ts-loader。

plugin: 插件,在webpack打包过程中的特定时间对资源进行一些处理,增强webpack的能力。例如打包优化,代码压缩等。常用的插件有clean-webpack-plugin删除上一次打的包。

webpack打包优化

压缩代码、按需加载资源、懒加载、缓存、删除多余的代码(tree-shaking)等

提升webpack构建速度

减少要打包的文件。

loader和plugin的区别

loader下载后直接使用,在编译阶段进行。

plugin下载后需要引用再使用,在整个周期都有效。

相关推荐
AICoder码农王17 分钟前
Vitest 实战:从一个真实项目看懂测试套件
前端·前端框架
律宏阔26 分钟前
Electron Forge 在 macOS M4 打包踩坑:Node.js 26 导致 make 异常中断
前端
木木爱研究29 分钟前
elpis-里程碑四-基于Vue完成动态组件库建设
前端·后端
深念Y32 分钟前
Nuxt 项目 Docker 构建:从 pnpm+node 迁移到全 bun
java·前端·docker
qq_4260039633 分钟前
UI自动化元素定位不到解决方案
前端·pycharm·自动化
EthanChou202039 分钟前
AES67协议笔记
前端·笔记·es6
马优晨41 分钟前
pom.xml 中 jquery webjars 依赖解释
xml·前端·jquery·jquery webjars·webjars依赖
里欧跑得慢1 小时前
AI 驱动的 UI 国际化方案自动适配:从单一语言到多语言布局的智能转换
前端·css·flutter·web
DolitD1 小时前
云流技术深度剖析:单服务器下如何实现3D应用的多实例并发?
java·服务器·前端·3d·云原生·云计算
芦柑4641 小时前
画布和3D导演台工具:短剧分镜从素材整理到空间预演的完整链路
服务器·前端·数据库