webpack中的loader
1、loader概述
在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块, webpack 默认处理不了,需要调用loader 加载器才可以正常打包,否则会报错!
loader 加载器的作用:协助webpack 打包处理特定的文件模块。
比如:
- css-loader 可以打包处理 .css 相关的文件
- less-loader 可以打包处理 .less 相关的文件
- babel-loader 可以打包处理webpack 无法处理的高级 JS 语法
2、loader的执行过程
3、打包处理css
我们在之前的案例中,如果想要引入一些css样式,我们就需要对css进行打包处理,如图,我们给一个简单的css样式:
然后使用webpack进行导入:
保存之后发现控制台报错:
大致意思就是我们需要一个能够加载css的loader进行打包css。
① 运行npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令,安装处理css 文件的 loader
② 在webpack.config.js 的module -> rules 数组中,添加 loader 规则如下:
其中,test 表示匹配的文件类型, use表示对应要调用的loader 注意:
- use 数组中指定的 loader 顺序是固定的
- 多个 loader 的调用顺序是:从后往前调用
配置成功后,重新启动项目,发现css就生效了。