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


完!

相关推荐
周不凢23 分钟前
vue3+ts实现百度地图鼠标绘制多边形
前端·vue.js
遗憾随她而去.1 小时前
CSS 定位:原理 + 场景 + 示例全解析
前端·css·html
爱编程的鱼1 小时前
如何用 HTML 展示计算机代码
前端·html
又又呢3 小时前
前端面试题总结——webpack篇
前端·webpack·node.js
dog shit4 小时前
web第十次课后作业--Mybatis的增删改查
android·前端·mybatis
我有一只臭臭4 小时前
el-tabs 切换时数据不更新的问题
前端·vue.js
七灵微4 小时前
【前端】工具链一本通
前端
Nueuis5 小时前
微信小程序前端面经
前端·微信小程序·小程序
_r0bin_8 小时前
前端面试准备-7
开发语言·前端·javascript·fetch·跨域·class
IT瘾君8 小时前
JavaWeb:前端工程化-Vue
前端·javascript·vue.js