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


完!

相关推荐
前端的日常19 分钟前
以下代码,那一部分运行快
前端
GeGarron20 分钟前
Drawing:专注高效画图,让每一次创作都值得被珍藏
前端
梨子同志20 分钟前
Vue v-model 指令详解
前端·vue.js
杨进军21 分钟前
简易实现 React 页面初次渲染
前端·react.js·前端框架
血舞之境23 分钟前
同名类引发问题:没见过世面导致遇见各种诡异的问题
前端
杨进军23 分钟前
实现 React 多个原生标签子节点渲染
前端·react.js·前端框架
前端的日常23 分钟前
AI 工具中,经常提到的 mcp 是什么,有哪些与前端方向结合的场景?
前端
嘉小华24 分钟前
Android 协程全景式深度解析:第四章 Flow响应式流
android·前端
Tina_晴25 分钟前
【基础篇】Promise初体验+案例分析(上)
前端·javascript·面试
断竿散人27 分钟前
浏览器 History 对象完全指南:从 API 原理到 SPA 路由实战
前端·javascript·vue-router