webpack的核心概念loader之打包静态资源-样式篇

1.style-loader和css-loadder

我的页面中现在有一张猫咪得图片，如下:

cat.png

但是我觉得图片有点太大了，于是我给图片加了一个avatar的类名,并在src目录下新建了一个demo.css的样式文件，对图片的大小进行了限制:

.avatar{
    width: 150px;
    height: 150px;
}

写好之后，在src目录下的入口文件index.js中引入样式文件:

import './demo.css'

然后运行npm run bundle进行打包，这时候控制台就会报一个错误，如下所示:

error.png

翻译过来就是webpack需要一个合适的loader来处理css文件，这个时候我们就需要能够处理样式的loader:style-loader,css-loader来帮我们处理样式文件了,修改webpack配置文件如下:

rules: [{
                test: /\.(jpe?g|png|gif|svg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name]_[hash:6]. [ext]',
                        outputPath: 'images',
                        limit: 204800 //表示当图片的大小超过200kb时，将其打包生成图片
                    }
                }
            },
            {//新增的代码
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
        ]

修改完之后还需要安装一下这两个依赖，

npm install css-loader style-loader -D

安装完成之后，运行npm run bundle再次打包，打包完成之后，打开页面，就可以看到我们的图片确实变小了:

css.png

css-loader的作用:css-loader会帮我们分析出几个css文件之间的依赖关系，最终把这些css文件合并成一个css文件；
style-loader的作用：在得到css-loader生成的内容之后，style-loader会把这段内容挂到页面的中,如下所示:

style.png

这个