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对我们项目工程优化之处：

1.工程结构更简洁2.让依赖关系更直观3.代码可维护性更强

小结

在前面我们也说过模块化的一些特性：高内聚性和可复用性，而本篇旨在描述出一切皆模块的思想，在学习webpack过程中，可以将这一思想尽情发挥到每一种静态资源上，从而使得项目系统更加简洁且健壮！下一篇继续发挥一切皆模块思想——预处理器（loader）。