代码拆分 - CSS

要通过webpack打包CSS，像任何其他模块一样将CSS导入JavaScript代码，并使用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模块生成新的bundle，并将它们作为单独的标记添加到index.html中。

• 上一篇：代码拆分(Code Splitting)
• 代码拆分 - 库(Libraries)：下一篇