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

最新推荐文章于 2025-11-26 11:05:18 发布

最新推荐文章于 2025-11-26 11:05:18 发布 · 164 阅读

文章标签：

#webpack #ViewUI

Webpack 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何使用Webpack处理CSS，包括引入CSS、配置css-loader及利用ExtractTextWebpackPlugin将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 --