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