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


完!

相关推荐
华仔啊10 小时前
图片标签用 img 还是 picture?很多人彻底弄混了!
前端·html
lichong95110 小时前
XLog debug 开启打印日志,release 关闭打印日志
android·java·前端
烟袅10 小时前
作用域链 × 闭包:三段代码,看懂 JavaScript 的套娃人生
前端·javascript
风止何安啊11 小时前
收到字节的短信:Trae SOLO上线了?尝尝鲜,浅浅做个音乐播放器
前端·html·trae
抱琴_11 小时前
大屏性能优化终极方案:请求合并+智能缓存双剑合璧
前端·javascript
用户4639897543211 小时前
Harmony os——长时任务(Continuous Task,ArkTS)
前端
fruge11 小时前
低版本浏览器兼容方案:IE11 适配 ES6 语法与 CSS 新特性
前端·css·es6
颜酱11 小时前
开发工具链-构建、测试、代码质量校验常用包的比较
前端·javascript·node.js
颜酱12 小时前
package.json 配置指南
前端·javascript·node.js
todoitbo12 小时前
基于 DevUI MateChat 搭建前端编程学习智能助手:从痛点到解决方案
前端·学习·ai·状态模式·devui·matechat