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就生效了。