webpack5 基礎設定（2） postcss使用 file-loader
第一小節講了browserslist的作用,接下里講Postcss
這個外掛有什麼用呢？
1 可以通過js來轉換css樣式如適配，加字首，css的重置等等
2 postcss本身功能很少，需要藉助其他外掛。
如何使用呢？
1 查詢postcss工具的擴充套件，比如webpack的postcss-loader，
2 安裝對應功能的postcss外掛。
先來看基本使用
原生postcss外掛需要藉助postcss-cli使我們能在命令列控制
cnpm install postcss -D
cnpm install postcss-cli -D
寫幾個需要字首的css
轉換：npx postcss -o result.css ./src/css/component.css
-o表示輸出，將對應的css檔案輸出到result.css中
輸出是輸出了，效果沒變化，這裡報警告了，你沒有設定任何外掛等，postcss現在啥也不能幹，就跟我們上面說的postcss功能很小，但能借助其他外掛使其功能壯大。
所以我們需要藉助外掛如autoprefixer
cnpm install autoprefixer -D
然後再轉換
npx postcss --use autoprefixed -o result.css ./src/css/component.css
–use表示用什麼外掛
轉化成功。
藉助webpack幫我們使用postcss來轉換css，不用我們手動改
postcss-loader，該loader能幫助我們找到使用postcss外掛並且轉換。
cnpm install postcss-loader -D
使用也很簡單，在我們的webpack.config.js檔案設定即
只要在我們匹配到css檔案的時候就先轉換css再去載入，一定要放在最後面，先通過postcss-loader轉換，再通過css-loader載入，再通過style-loader渲染。
接著我們執行build,打包一下
好吧，他依然沒生效。其實上面已經說了。postcss-loader只是幫我們使用postcss，但是postcss本身功能就不強大，需要依賴其他的外掛，所以我們還要繼續設定其他外掛，如autoprefixer。
這時候就要用上我們設定裡面的use物件了。
options屬性，用來設定一些東西，裡面的postcssOptions才是真正的設定postcss工具的外掛，plugins是我們要依賴的外掛，可以有多個，所以用資料放，而且依賴使用require(「外掛名」)使用。
這樣我們就依賴了atuoprefixer,來看看打包效果。
nice,已經幫我們加上了。
順便提一點，這個postcss工具的適配也是根據browserslist工具找到的瀏覽器來進行適配的，如果browserslist工具找到的瀏覽器都支援這個css屬性，那麼這個css屬性不需要加上字首。後期的babel也都是通過browserslist工具來進行適配。
還有設定，use的設定寫法其實是固定的，就是
use:[
{
loader: 「」,
options: {
//設定一些外掛什麼的
}
}
]
大體結構就是這樣
postcss-preset-env外掛
autoprefixer在各個腳手架的使用較少，大多數都是用postcss-preset-env
看官網，這個外掛可以幫我們轉換現代的css讓各個瀏覽器都能解析。這個外掛也是postcss工具的外掛之一，並且其中已經幫我們做了autoprefixer外掛做的事，甚至做得更多。比如根據目標瀏覽器或者執行時環境新增所需的polyfill。
看例子
此時執行build後，我們這八位是沒變的，
打包還是八位，所以有些瀏覽器可能不支援，因此要適配處理。
使用postcss-preset-env
cnpm install postcss-preset-env -D
使用也很簡單，由於是外掛直接在plugin裡面加入依賴就行。
可以看到轉換成功。而且我們可以不使用autoprefixer了，因為postcss-preset-env已經內建了autoprefixer了。
可以看到還是會幫我們自動加字首。
也可以簡寫
效果一樣，執行時還是會轉化成requeire("")來執行。
但並不是所有的外掛都可以簡寫，因為有些外掛時需要傳入額外的引數的，所以有些外掛不能簡寫。
還有less，scss的設定也是需要這些postcss外掛的，但是如果每份都寫顯得冗餘，所以我們把它抽離出去。
然後建立 postcss.config.js檔案，名字是固定的。
相當於對postcss-loader的options選項寫到一個新的檔案然後到處，書寫依賴的plugins，所有用到postcss-loader的都會來這個檔案查詢依賴。
build一下
效果不變。
css-loader處理@import屬性問題
css程式碼抽離引入失效問題
但我們將css檔案單獨抽到另一個檔案然後再引入,postcss外掛是不起效果的，為什麼？因為postcss工具的執行流程是這樣的，
一開始根據js檔案找到依賴的css檔案，然後用postcss-loader處理，接著用css-loader處理，裡面的@import是屬於css語法，css-loader會進行處理，但是postcss-loader不會。所以當我們走到@import時，此時css-loader發揮作用，繼續找到@import引入的那個css檔案，但此時最後找到的css檔案他只有css-loader和style-loader對其進行處理，並不會回頭再使用postcss-loader進行處理，也就是postcss-loader不會對他進行處理，就導致了postcss-loader無效的問題。
解決問題：
設定css-loader的option屬性
給options設定上importLoaders屬性，這個屬性的後面的引數是根據css-loader後面還有多少loader決定的。當為0時，表示找到@import直接使用css-loader處理即可。當為1時，表示往回找第一個loader，也就是我們的postcss-loader去處理，若我們的postcss-loader跟css-loader中間隔了三個loader，就要使用4來找到我們的postcss-loader。
Build一下試試
可以看到依然有用，證明我們設定生效了。如果我們要回頭讓Less-loader來處理，就得，
寫上2就行。
載入和處理其他資源
如圖片等等
build試試
老錯誤了，一看就知道需要loader。
file-loader的作用就是幫助我們處理import/require引入的一個檔案資源，並且將這些檔案資源一起輸出到build，一起打包。
file-loader處理 require回來的是一個物件，{default: 資源}
cnpm install file-loader -D
新的Loader新的規則
這裡會報錯，因為jsg | png 中間的 | 不隔空格
正常打包成功。
可以看到已經打包成功了。
寫法改一下這個。
好了現在可以正常顯示了
可以看到圖片被正常打包了。
file-loader做的事情非常簡單，他對我們的圖片進行一個賦值封裝打包到build裡面，然後我們引入的資源都是打包後的圖片。
修改打包後的檔名名字和約束大小
重新命名，對file-loader的options屬性進行設定
設定name屬性即可修改名字。
幾個最常用的placeholder（預留位置）
【ext】處理的原檔案的擴充套件名。
【name】處理的原圖片的名字
【hash】檔案的內容，hash值
【hash：length】hash值去長度
【contentHash】 在file-loader返回與hash一樣，在其他loader可能不同
【path】 檔案相對於webpack組態檔的路徑
看打包結果
重新命名成功。
圖片打包路勁
也是設定file-loader的options屬性裡面的outputPath屬性
打包成功。
也可以這樣寫，一樣的，開發經常這樣寫。
url-loader
與file-loader類似，但是可以將較小的檔案，轉成base64的URl。
打包後，url-loader會將圖片轉成base64,內嵌入js檔案中，打包時成功的，只不過打包入js了。
圖片正常顯示，但是會轉成base64。
優缺點：小的圖片轉成base64，大的圖片原樣複製過去就行，不然大的圖片太大，打包後的js也會變成非常大，到時候請求就非常慢。
file-loader就是更多的http請求，但是url-loader就是會造成js檔案太大。所以小的圖片就轉，大的圖片就請求。
所以我們要設定另一個屬性limit,這個屬性顧名思義就是超出限制我不轉換，小於限制我就轉換。
100kb以下轉換。
已經被轉化了。
木有轉換。這就是limit的用處。