Webpack & 理解 input & output 概念

一、介绍

如果还没用过 Webpack 请先阅读 Webpack & 基础入门 再回头看本文。

Webpack 的核心只做两件事,输入管理(Input Management)和输出管理(Output Management),什么花里胡哨的插件和配置都离不开这俩概念,带着俩概念去看文档我相信你会有所收获,而不再被密密麻麻的配置搞得云里雾里。

二、Input

  • modules.rules 对接受过来的文件交给 loader 处理。
  • resolve.extensions / resolve.alias 对接受过来的文件进行后缀识别、别名识别。
  • ...

这些配置都是针对"输入"来作为切入点,它们有个抽象名词叫 Input Management 即输入管理。

三、Output

  • entry 定义 Webpack 编译入口。
  • output 将输出的产物放到指定地方。
  • optimization 将输出的产物文件进行切分、缓存。
  • plugins 将输出的产物源码进行细化的操作。
  • ...

这些配置都是针对"输出"来作为切入点,它们有个抽象名词叫Output Management 即输出管理。


完!

相关推荐
hepherd4 分钟前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI5 分钟前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端
经常见6 分钟前
浅拷贝与深拷贝
前端
前端飞天猪11 分钟前
学习笔记:三行命令,免费申请https加密证书📃
前端
关二哥拉二胡12 分钟前
前端的 AI 应用开发系列二:手把手揭秘 RAG
前端·面试
斯~内克14 分钟前
前端图片加载性能优化全攻略:并发限制、预加载、懒加载与错误恢复策略
前端·性能优化
奇怪的知识又增长了23 分钟前
Command SwiftCompile failed with a nonzero exit code Command SwiftGeneratePch em
前端
Maofu23 分钟前
从React项目 迁移到 Solid项目的踩坑记录
前端
薄荷味23 分钟前
ubuntu 服务器安装 docker
前端
Carlos_sam24 分钟前
OpenLayers:如何控制Overlay的层级?
前端·javascript