写在前面
这是webpack实战系列笔记的第4篇记录，简单描述一个思想：模块化思想——一切皆模块。本系列前几篇：
•打包第一个应用•模块化与模块打包•资源输入与输出
一切皆模块
一个web工程通常会包含一系列的静态资源，并且这些资源一般会存在某种相互依赖的关系。一般静态资源包含：
•HTML/CSS/JS•图片/音视频x•字体•模板•。。。
而其中可能存在的联系也容易举例，比如JS之间相互导出引入、HTML中会引入CSS、JS，而CSS和JS中又可能会引入图片、音视频等媒体资源。
但是对于webpack来说，这些静态资源却都是模块，我们可以像加载一个JS模块一样去加载它们，如：
如果经常使用vue\react等单页面框架去构建项目的一定会非常熟悉这种写法，但如果没接触过的也一定会感觉这种写法比较新奇，甚至迷惑不解：从JS中加载CSS的意义何在呢？
其实从显示结果来看各种方法所呈现的页面都一样，但是实际上，上述语句却将
reset.css
打包生成在了输出资源目录下，并且描述了JS与CSS文件之间的依赖关系。
举例
举个场景：某页面模块需要用到按钮，于是我们加载它：
但是加载了JS文件之后发现需要各类样式，因此仍需要引入按钮组件的样式文件：
当然，在webpack中实际构建时，可以采用更加简洁的写法来处理：
从上例子可以看到，在button的JS中加载了组件自身的样式，但对于需要该组件的页面来说，只需要引入button的js模块即可，不需要再这里引入button的样式了。
可以画出依赖图便于理解：
•先看一般情况下的流程：
•接下来看使用webpack：
可以看到，在一般情况下，JS和Style样式是分开处理的，我们需要分别维护组件JS和SCSS，每当我们增删一个或多个组件的时候，都需要多次操作操作：引入 JS&SCSS 或者删除 JS&SCSS。但在使用 webpack 的情况下，可以看到，button 模块被作为一个整体被引入进来，这样不仅可以直观且请清晰的看到依赖关系（JS和SCSS被作为一个整体引入到page/index.js），而且在进行组件的引入与删除时，直接操作一次即可达成目的。
在项目具有一定规模的情况下，可以更加清晰明了的总结出webpack对我们项目工程优化之处：
1.工程结构更简洁2.让依赖关系更直观3.代码可维护性更强
小结
在前面我们也说过模块化的一些特性：高内聚性和可复用性，而本篇旨在描述出一切皆模块的思想，在学习webpack过程中，可以将这一思想尽情发挥到每一种静态资源上，从而使得项目系统更加简洁且健壮！下一篇继续发挥一切皆模块思想——预处理器（loader）。
本文分享自微信公众号 - 流眸（zxm0146）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。