[译]webpack官网文档 ：指南 -- 5.代码分割 - CSS

原创翻译，转载请注明出处。 

原文地址：https://webpack.js.org/guides/code-splitting/

 

用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

在webpack.config.js里分三个步骤添加之后才能使用这个插件。

+var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    module: {
         rules: [{
             test: /\.css$/,
-            use: 'css-loader'
+            use: ExtractTextPlugin.extract({
+                use: 'css-loader'
+            })
         }]
     },
+    plugins: [
+        new ExtractTextPlugin('styles.css'),
+    ]
}

 

通过上面两步，你可以把所有的CSS模块生成一个单独的包，并把它作为单独的标签加入到index.html里。

 

-- End --