为了用webpack打包CSS文件，必须在在你的JavaScript代码中引入CSS文件, 并运用 css-loader (将CSS输出为JS模块), 还可以运用ExtractTextWebpackPlugin插件 (提取已经被打包的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被打包在一起。
这有一个缺点，你将无法利用浏览器的异步和并行加载CSS的能力。 相反，您的网页必须等待，直到整个JavaScript包加载完成，才能去绘制页面。
webpack可以运用 ExtractTextWebpackPlugin插件单独打包CSS来帮助我们来解决这一问题 。
使用ExtractTextWebpackPlugin
执行如下命令，安装 ExtractTextWebpackPlugin 插件
npm i --save-dev extract-text-webpack-plugin@beta
为了使用这一插件，我们需要对 webpack.config.js文件做两处修改。
module.exports = {
module: {
rules: [{
test: /\.css$/,
- use: 'css-loader'
+ use: ExtractTextPlugin.extract({
+ use: 'css-loader'
+ })
}]
},
+ plugins: [
+ new ExtractTextPlugin('styles.css'),
+ ]
}
我们可以为所有的CSS模块生成一个单独的新包，并且以一个单独的标签在index.html中引入。
