寫在前面
這是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：
![]()
可以看到，在一般情況下，JS和Style樣式是分開處理的，我們需要分別維護組件JS和SCSS，每當我們增刪一個或多個組件的時候，都需要多次操作操作：引入 JS&SCSS 或者刪除 JS&SCSS。但在使用 webpack 的情況下，可以看到，button 模塊被作爲一個整體被引入進來，這樣不僅可以直觀且請清晰的看到依賴關係（JS和SCSS被作爲一個整體引入到page/index.js），而且在進行組件的引入與刪除時，直接操作一次即可達成目的。
在項目具有一定規模的情況下，可以更加清晰明瞭的總結出webpack對我們項目工程優化之處：
- 工程結構更簡潔
- 讓依賴關係更直觀
- 代碼可維護性更強
小結
在前面我們也說過模塊化的一些特性：高內聚性和可複用性，而本篇旨在描述出一切皆模塊的思想，在學習webpack過程中，可以將這一思想盡情發揮到每一種靜態資源上，從而使得項目系統更加簡潔且健壯！下一篇繼續發揮一切皆模塊思想——預處理器（loader）。