CSS是前端開發(fā)中不可或缺的一部分，而Webpack則是目前最流行的打包工具之一。在使用Webpack打包CSS時，我們需要額外配置一些插件，下面就讓我們來看看如何使用Webpack打包CSS。

首先，在webpack.config.js中配置CSS loader。

module.exports = {
/* 入口文件 */
entry: './src/index.js',
/* 出口文件 */
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};

上述代碼中，我們使用了style-loader和css-loader來處理CSS文件。其中，css-loader 用于解析CSS文件，style-loader則負責處理樣式，并將其注入到HTML文件中。

接下來，我們可以在入口文件中引入CSS文件：

import './style.css'

現(xiàn)在，我們已經(jīng)成功將CSS文件引入到JS文件中，但是我們還要將所有的CSS文件打包到一個文件夾中。我們可以使用mini-css-extract-plugin插件來完成這項任務。我們需要先安裝此插件：

npm install --save-dev mini-css-extract-plugin

安裝完成后，我們需要在webpack.config.js中引入此插件，并做出以下更改：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
/* 入口文件 */
entry: './src/index.js',
/* 出口文件 */
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.css'
})
]
};

上述代碼中，我們將樣式文件打包到名為style.css的文件中。mini-css-extract-plugin會將CSS文件從JS文件中分離出來，并將其注入到HTML文件中。我們需要使用MiniCssExtractPlugin.loader來加載樣式文件，取代之前使用的style-loader。

現(xiàn)在，你已經(jīng)成功地用Webpack打包了CSS文件！