為了用webpack打包CSS文件，必須在在你的JavaScript代碼中引入CSS文件, 并運(yùn)用 css-loader (將CSS輸出為JS模塊), 還可以運(yùn)用ExtractTextWebpackPlugin插件 (提取已經(jīng)被打包的CSS并輸出為CSS文件)笋额。
引入CSS
像JavaScript模塊一樣引入CSS文件，例如在vendor.js中：
import 'bootstrap/dist/css/bootstrap.css';
使用css-loader
在 webpack.config.js配置 css-loader如下:
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: 'css-loader'
}]
}
}
如此劈猿，CSS與您的JavaScript被打包在一起沮榜。
這有一個(gè)缺點(diǎn)尚胞，你將無(wú)法利用瀏覽器的異步和并行加載CSS的能力签钩。 相反幻锁，您的網(wǎng)頁(yè)必須等待，直到整個(gè)JavaScript包加載完成边臼，才能去繪制頁(yè)面。
webpack可以運(yùn)用 ExtractTextWebpackPlugin插件單獨(dú)打包CSS來(lái)幫助我們來(lái)解決這一問(wèn)題 假消。
使用ExtractTextWebpackPlugin
執(zhí)行如下命令柠并，安裝 ExtractTextWebpackPlugin 插件
npm i --save-dev extract-text-webpack-plugin@beta
為了使用這一插件，我們需要對(duì) webpack.config.js文件做兩處修改富拗。
module.exports = {
module: {
rules: [{
test: /\.css$/,
- use: 'css-loader'
+ use: ExtractTextPlugin.extract({
+ use: 'css-loader'
+ })
}]
},
+ plugins: [
+ new ExtractTextPlugin('styles.css'),
+ ]
}
我們可以為所有的CSS模塊生成一個(gè)單獨(dú)的新包臼予，并且以一個(gè)單獨(dú)的標(biāo)簽在index.html中引入。
