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 即输出管理。


完!

相关推荐
2501_944446005 分钟前
Flutter&OpenHarmony文本输入组件开发
前端·javascript·flutter
AI前端老薛12 分钟前
你了解react合成事件吗
前端·react.js·前端框架
贺今宵21 分钟前
2025.electron-vue3-sqlite3使用
前端·javascript·electron
王同学_11639 分钟前
爬虫辅助技术(css选择器、xpath、正则基础语法)
前端·css·爬虫
牛先森家的牛奶1 小时前
elementUI的table合并行和列模板
前端·javascript·elementui
En^_^Joy1 小时前
CSS常用属性速查手册
前端·css
Bigger1 小时前
踩坑记:NPM 发布脚本导致组件重复发布
前端·ci/cd·npm
Hao_Harrision1 小时前
50天50个小项目 (React19 + Tailwindcss V4) ✨ | AutoTextEffect(自动打字机)
前端·typescript·react·tailwindcss·vite7
IT_陈寒1 小时前
Vite 3.0 实战:5个优化技巧让你的开发效率提升50%
前端·人工智能·后端
玲小珑1 小时前
React 防抖函数中的闭包陷阱与解决方案
前端·react.js