webpack对css进行压缩

最新推荐文章于 2025-04-05 15:03:19 发布

前路茫茫——何处无香

最新推荐文章于 2025-04-05 15:03:19 发布

阅读量443

点赞数 1

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.youkuaiyun.com/qq_42141087/article/details/114640462

webpack 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用Webpack中的css-loader和style-loader来压缩CSS代码并将其引入JavaScript文件中。重点讲解了style-loader创建style标签的过程及css-loader处理CSS依赖的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在html中我们引用css代码一般是用link标签，如今我们借助webpack将css代码引入到我们的.js文件中，并让其生效。

接下来进入正题，我们将使用webpack中的css-loader和style-loader进行代码压缩。

大家一定要注意css-loader和style-loader

style-loader

style-loader是通过一个JS脚本创建一个style标签，里面包含一些样式。style-loader是不能单独使用的，因为它不负责解析css之前的依赖关系，每个loader的功能都是单一的，各自拆分独立

css-loader

css-loader会处理import/require() @import/url引入的内容

注意：webpack运行时是自下向上允许的，所以style-loader和css-loader的位置不能写错

    module: {
        rules: [
            //配置css压缩文件
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader"
                    }
                ]

            }
        ]
    },