之前學習過webpack3的知識，但是webpack4升級後還是有很多變動的，所以這次重新整理一下webpack4的知識點，方便以後複習。

這次學習webpack4不僅僅要會配置，記住核心API，最好還要理解一下webpack更深層次的知識，比如打包原理等等，所以可能會省略一些比較基礎的內容，但是希望我可以通過此次學習掌握webpack，更好地應對以後的工作。

1.配置css-loader

1.1 importLoaders

我們在scss檔案中再引入一個scss。

此時webpack在打包的時候有可能就不經過postcss-loader和sass-loader。所以我們要新增options。

importLoaders:num 這裡的數量指的是當前loader之後loader的數量

importLoaders:2 的意思是：引入的scss檔案也要進行postcss-loader和sass-loader的過程。

2.css模組化

我們之前引入css的方法會作用於全域性，可能會影響到其他模組的樣式，所以我們引入了css模組化的概念。

比如：我們動態建立一個img標籤，新增到body中，再引入一個js方法，把相同的邏輯寫到裡面並呼叫，這樣body中就會有兩個img標籤，而之前引入css的方式會作用兩個標籤。

現在我們在options中新增一個modules的配置項。

引入css的方式變為：

這樣css樣式就只會影響單獨的模組，和其他的模組不會有任何的衝突。

3.打包字型檔案

引用阿里iconfont檔案時，css中會引用字型檔案，而webpack並不認識字型檔案，所以需要使用file-loader。

然後再進行webpack打包就不會有任何問題了。