因为webpack只能理解js和json（即默认是可以打包js和json文件的），那么其他非js文件或非json文件（如css等），就需要借助loader处理。
loader 将其他类型的文件（非js、非json文件）转换为有效的模块，以供应用程序使用，以及被添加到依赖图中
loader
1）引入loader
编写案例代码
css文件可以在任何地方引入（css文件被引入到js文件中），只要确保它在入口文件的依赖关系图中即可
上面的错误信息告诉我们，需要一个loader来加载这个css文件，但是loader是什么呢？
- loader 可以用于对模块(将css文件也看成一个模块)的源代码进行转换。
我们可以将css文件也看成是一个模块（我们是通过import来加载这个模块的）； 在加载这个模块时，webpack其实并不知道如何对其进行加载（webpack并不知道如何处理这个css文件），我们必须指定对应的loader来完成这个功能
Q：那webpack为什么可以处理js呢？因为js的处理过程是webpack已经内置过的（webpack原生支持js和json） 但是webpack内置的js处理过程并没有处理得很好，后面我们需要babel-loader对js进行进一步的处理
:::info
导入的几种方式
1）ES6：import { xx } from ‘./xx/xx’ （对应的导出是 export const obj（默认导出））
2）CommonJS ：require(‘./xx/xx’ ) （对应的导出是 module.export = { } ）
3）直接导入 import ‘./xx/xx’;
:::
2）css-loader
对于上面的那个案例，我们需要一个什么样的loader呢？
对于加载css文件来说，我们需要一个可以读取css文件的loader，即css-loader。
3）如何使用css-loader呢？
① 首先，安装css-loader
npm install css-loader -D (-D 是 —save-dev 的缩写，install也可以简写为 i ）
package.json 文件中就会有其安装版本信息 项目的node_modules文件夹下也会有 css-loader 安装包
② 使用css-loader的几种方案
- 配置方式
- 内联方式；
- CLI方式（webpack5中已不再使用）
a.配置方式（★★★）
配置方式是在我们的webpack.config.js文件中写明配置信息
优点：可以更好地表示loader的配置，也方便后期的维护，同时也让你对各个loader有一个全局的概览
module值是一个对象，module.rules中允许我们配置多个loader
module.rules的配置如下
rules属性对应的值是一个数组：[ ]，数组中存放的是一个个的Rule对象，对象中可以设置多个属性：
- test属性：用于对 resource（资源）进行匹配，通常会设置成正则表达式；
- loader属性：Rule.use：[ { loader } ] 的简写；（见第二张和第三张图）
use属性：对应的值是一个数组[ useEntry ]，useEntry是一个对象，可以通过对象的属性来设置一些其他属性：
-** loader（必需）**：对应的值是一个字符串；<br /> - **options（可选）**：值是一个字符串或者对象，值会被传入到 loader 中；<br /> - query：目前已经使用 options 来替代了<br /> （PS：传递字符串（如：use: ['css-loader']）是 loader 属性的简写方式（如：use: [ { loader: 'css-loader'}]））（见第三张图）<br /><br />图 简写写法<br /><br />图 完整写法<br /><br />
如果需要使用option的话，我们就用对象形式
当然，光一个css-loader还是不能够呈现我们想要的界面，还需要 style-loader（将我们处理过后的css插入到页面中）
注意！！！
webpack loader 其实就是对资源文件的转换，从上一个laoder拿到结果，转换后再返回给下一个loader，所以在配置文件中要注意loader的顺序。
b.内联方式
在引入的样式前加上使用的loader，并且使用 ！分割；
缺点：内联方式使用较少，因为不方便管理
4）style-loader
5）less-loader
less-loader css-loader style-loader
6）postcss-loader
处理其他资源
处理其他资源，比如图片、字体等，我们应该如何处理
处理图片资源
方式一：file-loader（webpack5中已不再使用该方式）
过程：test匹配到图片（jpg格式、png格式的图片等），匹配到之后用file-loader处理。
原理：直接将图片复制到build或dist 文件夹下，然后进行重命名。
直接使用 file-loader（不配置属性） 处理图片资源的一个弊端：图片被放到 build 文件后，图片名字被重命名了（md4算法，默认），那这样的话，就不知道之前的哪张图片对应build下的哪张图片了（不清楚对应关系了）
对打包后的图片名进行重命名（默认是md4算法）
设置 file-loader 的属性-占位符，来解决上面的问题。（将打包后的图片名字进行自定义）
设置文件的存放路径
因为图片都放在build文件夹下会有点乱，所以我们在build下新建一个文件夹，比如img，将所有的图片都放在该文件夹中。所以，我们也需要在webpack.config.js 中指定打包的文件放在指定的文件夹下。
① 在重命名的图片名称前直接加 “img/”即可（常用）
② 或者通过 outputPath 属性来设置输出到哪个文件夹下
总结 - 对打包后的图片进行重命名和设置图片的存放路径（最终解！！！）（这个也是vue的写法）
vue-cli打包图片时的图片名称自定义、打包后的图片都放在img文件夹下这些设置，跟我们这里设置的是差不多的
方式二：url-loader（webpack5中已不再使用该方式）
方式三：asset module type（现在，webpack5）
在webpack5之前，加载图片、字体等资源我们需要使用一些loader，比如file-loader、url-loader、raw-loader等；
在webpack5之后，我们可以直接使用 资源模块类型（asset module type），来替代上面的这些loader。
asset module type的使用
若有收获，就点个赞吧
0 人点赞
