Webpack是一個強大的JavaScript模塊打包工具，可用于將多個文件打包成單個文件。

隨著Web應用程序的不斷發展，CSS在各種項目中變得越來越重要。webpack4也有一些很棒的功能可用于處理CSS。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};

上述代碼演示了如何使用mini-css-extract-plugin將CSS抽取到單獨的文件中 首先，我們使用“test"鍵指定Webpack應該處理哪些文件，使用正則表達式檢查文件擴展名。

隨后，"use"數組中的"css-loader"和"sass-loader"分別允許Webpack處理CSS和Sass，并將其轉換為瀏覽器可以讀取的格式。
最后，使用MiniCssExtractPlugin將CSS抽取到單獨的文件中，并將其命名為“name.css”。

Webpack4還支持使用autoprefixer自動添加CSS前綴的功能。

module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
plugins: () =>[
require("autoprefixer")()
]
}
},
"sass-loader"
]
}
]
},
};

上述代碼使用PostCSS和autoprefixer為CSS添加了自動前綴。使用postcss-loader是將PostCSS插入Webpack執行鏈中的方法之一。在options對象中，我們定義了一個plugins函數，使用require來導入autoprefixer插件。

這個插件允許指定要添加的瀏覽器的最近版本。

在一個小規模的應用中，從CSS文件中提取CSS可能沒有必要，但對于大型應用程序來說，這樣做會減輕瀏覽器的負擔，并加快應用程序的加載速度。