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


完!

相关推荐
爱网安的monkey brother19 分钟前
vue3+ts项目自建训练
前端·javascript·vue.js
哆啦A梦158823 分钟前
商城后台管理系统 02,上传图片实现
前端·javascript·vue.js·elementui
破z晓25 分钟前
若依(vue版)集成ArcGIS
前端·vue.js·arcgis
jinxinyuuuus32 分钟前
FIRE之旅 财务计算器:实时交互式建模与前端性能工程
前端·人工智能·算法·自动化
Redundantº33 分钟前
vuedraggable前端拖拽插件
前端
snow@li35 分钟前
前端:软件开发中的秤砣理论 / 越简单越可靠 / 提炼组织架构 / 精确标定工作 / 有主干有支流 / 不追求繁琐 / 不做表面工作
前端·架构
张毫洁36 分钟前
将后端resources中的文件返给前端下载的方法
前端·状态模式
Hao_Harrision39 分钟前
50天50个小项目 (React19 + Tailwindcss V4) ✨| RandomChoicePicker(标签生成)
前端·typescript·react·vite7·tailwildcss
浮游本尊41 分钟前
React 18.x 学习计划 - 第九天:React 18高级特性和最佳实践
前端·学习·react.js