Webpack在項目構建中是非常重要的工具，它可以將你的項目代碼進行打包，合并和壓縮，以提高你的Web應用的性能。對于CSS文件，Webpack可以對其進行優化和處理，以便在項目中更加高效地使用。下面，我們將探討Webpack3中的CSS功能。
在Webpack3中，CSS文件的處理有兩種方式：CSS loader和CSS plugin。
CSS loader可以使用一個或多個loader來解析CSS文件，例如css-loader和style-loader，即是對CSS代碼進行解析和添加到頁面中。css-loader通過解析CSS文件中的import和url引用路徑，將其轉換成Webpack可以識別的文件路徑；而style-loader則負責將解析好的CSS代碼，添加到頁面中去。
一個常見的配置可以是：
```
module:{
rules:[
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
}
]
}
```
上面的配置含義是，當Webpack遇到擴展名為.css的文件時，首先使用css-loader進行解析，然后將最終的CSS代碼添加到頁面中去，而style-loader則是將合并后的CSS代碼添加到標簽中，使其可以被正確的渲染。
除了CSS loader之外，Webpack3還提供了一種新的CSS處理方式，即CSS plugin。
CSS plugin可以將CSS文件單獨打包成一個文件，并添加到頁面中。例如，在Webpack3中，可以使用extract-text-webpack-plugin來實現這一功能。使用該插件可以將CSS代碼從JS代碼中分離出來，并單獨打包成一個文件，最終添加到頁面中。這樣可以提高應用性能，減少HTTP請求次數，從而使應用更加高效。
一個常見的配置可以是：
```
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module:{
rules:[
{
test:/\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins:[
new ExtractTextPlugin('style.css')
]
```
上面的配置含義是，當Webpack遇到擴展名為.css的文件時，使用ExtractTextPlugin將其單獨打包成一個文件，并將最終的CSS文件添加到頁面中，而樣式文件名為style.css。
綜上所述，Webpack3中除了CSS loader之外，還提供了CSS plugin的方式，可以通過插件將CSS代碼單獨打包成一個文件，并添加到頁面中去。這兩種方式可以結合使用，以達到更高效的CSS處理效果。
下一篇html5實現煙花代碼