对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下载后需要引用再使用,在整个周期都有效。

相关推荐
hiahiahia1235 小时前
Streaming Model Output
开发语言·前端
paopaokaka_luck5 小时前
基于springboot+vue的益暖微光公益服务平台(DeepSeek公益助手、善款信息追溯、志愿服务积分闭环、ECharts运营分析、活动状态自动流转)
java·前端·javascript·spring boot·mysql·架构·echarts
栀椩5 小时前
Electron 内嵌页面跨域问题(CORS/PNA)解决全记录
前端·javascript·electron
asaotomo5 小时前
截图识题、AI 讲解、笔记沉淀:Chrome 扩展体验
前端·chrome·笔记
前端架构师-老李5 小时前
HTML与CSS基础第五课—HTML的空格、换行、横线相关知识
前端·css·html
SEO_juper5 小时前
Chrome 扩展一键查看当前页面 SEO 信息:不用切页面,点一下全出来
前端·javascript·chrome
Nymph_Zhu6 小时前
vue3+element-plus 文件上传
前端·typescript·vue3·element-plus
echome8886 小时前
CSS 布局:Flex 和 Grid 怎么选,附常见坑
前端·css·html
计算机魔术师6 小时前
科技巨头砸7400亿押注AI,为什么苹果成了唯一赢家?
前端
QianhangQianping6 小时前
撤销重做不是「存快照」:一个可视化编辑器的Operation 设计
java·前端·数据库·typescript·编辑器·前端架构·撤销重做