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


完!

相关推荐
小小愿望几秒前
ECharts 实战技巧:揭秘 X 轴末项标签 “莫名加粗” 之谜及破解之道
前端·echarts
小小愿望8 分钟前
移动端浏览器中设置 100vh 却出现滚动条?
前端·javascript·css
fail_to_code9 分钟前
请不要再只会回答宏任务和微任务了
前端
一大树9 分钟前
Webpack 配置与优化全攻略:从基础到进阶实战
webpack
摸着石头过河的石头9 分钟前
taro3.x-4.x路由拦截如何破?
前端·taro
lpfasd12318 分钟前
开发Chrome/Edge插件基本流程
前端·chrome·edge
练习前端两年半1 小时前
🚀 Vue3 源码深度解析:Diff算法的五步优化策略与最长递增子序列的巧妙应用
前端·vue.js
烛阴1 小时前
TypeScript 接口入门:定义代码的契约与形态
前端·javascript·typescript
掘金安东尼1 小时前
使用自定义高亮API增强用户‘/’体验
前端·javascript·github
参宿72 小时前
electron之win/mac通知免打扰
java·前端·electron