CSS代码分离

为了用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中引入。