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


完!

相关推荐
消失的旧时光-19436 小时前
Flutter 工程中 mixin 的正确打开方式:5 种高质量设计范式 + mixin vs 继承 vs 组合 + 为什么它比 BasePage 更优雅
前端·flutter·架构
乐吾乐科技6 小时前
乐吾乐3D可视化2025重大更新与2026升级计划
前端·3d·信息可视化·编辑器·数据可视化
C_心欲无痕6 小时前
html - 使用视频做天气卡片背景
前端·html·音视频
毕设十刻7 小时前
基于Vue的养老服务平台85123(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
青衫折扇7 小时前
执行 npm 安装命令时,包被装到了 C 盘用户目录下,而非项目根目录
前端·npm·node.js
XiaoYu20027 小时前
第2章 Nest.js入门
前端·ai编程·nestjs
没事多睡觉6667 小时前
零基础React + TypeScript 教程
前端·react.js·typescript
liliangcsdn7 小时前
MySQL存储字节类数据的方案示例
java·前端·数据库
_Kayo_7 小时前
React useState setState之后获取到的数据一直是初始值
前端·javascript·react.js
谷哥的小弟7 小时前
HTML5新手练习项目—生命体征监测(附源码)
前端·源码·html5·项目