loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块
注意，loader 能够 import 导入任何类型的模块（例如 .css 文件），这是 webpack 特有的功能，其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是有很必要的，因为这可以使开发人员创建出更准确的依赖关系图。
在更高层面，在 webpack 的配置中 loader 有两个目标：
- test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件
- use 属性，表示进行转换时，应该使用哪个 loader
// webpack.config.js
const path = require("path");
const config = {
output: {
filename: "my-first-webpack.bundle.js",
},
module: {
rules: [{ test: /.txt$/, use: "raw-loader" }],
},
};
module.exports = config;
以上配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use这告诉 webpack 编译器(compiler) 如下信息：
“嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 ‘.txt’ 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。”
总结: 因为webpack本身只能编译js文件，loader 就是帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块 例如:less sass css png等文件
常用 loader样式
- style-loader 将样式模块导出的内容以往 中注入多个