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

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

1.靜態資源打包

1.1 引入css樣式檔案

當我們的專案中引入css檔案的時候，需要對webpack進行配置，用來打包css檔案。css的loader是css-loader和style-loader。

css-loader的作用是：幫我們分析出幾個css之間的關係，最終把幾個css檔案合併成一個css。

style-loader的作用是：得到css-loader生成的css內容後，style-loader會把內容掛載到head上。

所以style-loader和css-loader要配合使用。

1.2 引入scss樣式檔案

注意：使用scss要安裝sass-loader和node-sass。

1.3 自動補充廠商字首

css3屬性一般都會加常上字首，而postcss-loader可以自動幫我們新增廠商字首。

使用方法：在webpack.config.js同級目錄新建一個postcss.config.js

2.loader的執行順序

loader執行順序是：從下到上，從右到左。

以上面scss作為例子，sass-loader先執行，對scss檔案進行翻譯，翻譯為css程式碼後給到css-loader，都處理好了之後，由style-loader掛載到頁面上。