问题:通过webpack打包时报错
上面的错误信息告诉我们需要一个loader来加载这个css文件
loader可以用于对模块的源代码进行转换
我们可以将css文件也看成是一个模块,我们是通过import来加载这个模块的
在加载这个模块时,webpack其实并不知道如何对其进行加载,我们必须指定对应的loader来完成这个功能
解决方法:
1.内联方式
内联方式使用较少,因为不方便管理
在引入的央视前面加上使用的loader,并且使用!分割;
import "css-loader!../css/div_style.css"
2.CLI方式
这个方式在webpack5中已经不再使用了--module-bind
3.配置方式
loader配置方式
配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息;
module.reules的配置如下:
rules属性的值是一个数组:[Rule]
数组里面又是一个个对象,对象中可以设置多个属性
test属性:用于对resource(资源)进行匹配的,通常会设置为正则表达式
use属性:对应的值是一个数组:数组里面又是多个对象
loader:必须有一个loader属性,对应的值是一个字符串;
options:可选属性,值是一个字符串或者对象,值会被传入到loader中;
query:目前已经使用options来代替了
module.exports = { // 模块 module:{ // 规则 rules:[ { test:/\.css$/, use:[ { loader:"style-loader" }, { loader:"css-loader" } ] } ] } }