webpack —— loader

前面我们学习了webpack的安装、打包、配置文件等功能，现在我们接着来探索webpack的loader。

需求：创建一个div元素，元素内容为一个字符串，并给该元素设置一些样式。

在前面代码的js目录里创建component.js文件；在src目录下创建css文件夹，并且创建component.css文件，并且给div设置红色字体。

 代码编写完之后，进行打包，发现报错，提示我们需要适当的loader去处理css文件。

 通过查看文档，我们可以知道，loader可以对模块的源代码进行转换，而css文件可以看成是一个模块，我们通过import来加载这个模块。

但是在加载这个模块时，webpack并不知道要如何进行加载该模块，我们需要指定对应的loader来完成这个功能。对于css文件来说，我们需要一个可以读取css文件的loader，即css-loader。

css-loader

首先，先安装css-loader：

其次，配置loader：

然后打包代码，打包成功，但是发现浏览器中元素的样式并没有生效。因为css-loader只是负责将css文件进行解析，并没有将css代码插入到页面中。

style-loader

如果我们希望将css样式插入到页面中，需要借助style-loader。

重复上述步骤，安装、配置style-loader。