webpack对css进行压缩

在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"
                    }
                ]

            }
        ]
    },