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


完!

相关推荐
首席拯救HMI官19 小时前
【拯救HMI】HMI容错设计:如何减少操作失误并快速纠错?
大数据·运维·前端·javascript·网络·学习
m0_7482546619 小时前
Vue.js 模板语法基础
前端·vue.js·flutter
PBitW19 小时前
和AI浅聊了一下SEO —— 真神Astro
前端·seo
胆大如牛白展堂19 小时前
自动刷新token登录
前端·设计模式
Charon_super19 小时前
html语法笔记
前端·笔记·html
JeffreyTaiT19 小时前
根据binlog恢复SQL
前端·mysql
Anita_Sun19 小时前
Lodash 源码解读与原理分析 - Lodash 静态方法与原型方法
前端
明月_清风19 小时前
Async/Await:让异步像同步一样简单
前端·javascript
听风说图19 小时前
从 JavaScript 到 WGSL:用渐变渲染理解 GPU 编程思维
前端
float_六七19 小时前
CSS行内盒子:30字掌握核心特性
前端·css